Bootstrap Modal立即消失

Question

我在使用bootstrap的网站上工作。

基本上，我想在主页中使用一个模态，由英雄单元中的按钮召唤。

按钮代码：

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

模态代码：

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

问题是，只要我点击按钮，模态就会淡入，然后立即消失。

我很感激任何帮助。

另外，如何更改下拉三角形的颜色（朝上，没有悬停）？我正在开发一个基于橙色和棕色的网站，蓝色的东西真的很烦人。

Answer 1

一个可能的原因

这是Modal插件的JavaScript加载两次时的典型行为。请检查以确保插件没有加载双重。根据您使用的平台，可以从多个源加载模态代码。一些常见的是：

bootstrap.js（完整的BootStrap JS套件）
bootstrap.min.js（与上面相同，只是缩小）
bootstrap-modal.js（独立插件）
依赖加载器，例如require('bootstrap')

调试技巧

一个好的起点是使用浏览器中的开发人员工具检查已注册的click事件监听器。例如，Chrome将列出JS源文件，其中可以找到注册侦听器的代码。另一种选择是尝试在页面上搜索模态代码中找到的短语，例如var Modal。

不幸的是，在所有情况下，这些并不总能找到。在为您提供页面上加载的所有内容的图片时，检查网络请求可以更加健壮。

一个（破碎的）演示

这是一个演示当你加载bootstrap.js和bootstrap-modal.js时发生的事情（只是为了确认你的体验）：

Plunker

如果向下滚动到该页面上源代码的底部，则可以删除或注释掉bootstrap-modal.js的<script>行，然后验证模态现在是否按预期运行。

Answer 2

在我的情况下，我只包含一个bootstrap.js，jquery.js文件但仍然出现这种类型的错误，我的按钮代码是这样的：

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

我简单地添加了e.preventDefault（）;对它而言，它就像魅力一样。

所以，我的新代码如下：

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>

Answer 3

我今天自己遇到过这个问题，而且它恰好只出现在Chrome中。是什么让我意识到这可能是一个渲染问题。将特定模态移动到它自己的渲染层可以解决它。

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

Answer 4

我也遇到了同样的问题，但对我而言却发生了这种情况，因为我在模态表单中有一个类型为“提交”的按钮。我变了

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

至

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

这解决了失踪问题。

Answer 5

在我的情况下，单击按钮会导致（不需要）重新加载页面。

这是我的修复：

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

Answer 6

在我的情况下，我在MVC中使用actionlink按钮，我已经面临这个问题，我已经尝试了许多上面和其他的解决方案，但仍然面临这个问题，然后我意识到我的代码中的错误。

我用javascript在javascript中调用了modal

 $('#ModalId').modal('show');

在错误之前我使用这个按钮

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

我在这个按钮中没有href属性的值，所以我面临这个问题。

然后我像这样编辑这个按钮代码

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

因为第一个中没有＃，所以问题只会被解决。

看看这对你有帮助。

Answer 7

我在使用asp.NET的项目上遇到了同样的问题。我使用bootstrap 3.1.0解决了它降级到Bootstrap 2.3.2。

Answer 8

我在移动设备上测试期间遇到了同样的问题，这个技巧对我有用

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a>

更改按钮以锚定标签它应该工作，问题发生由于它的类型按钮，因为它试图提交所以模态立即消失。还删除隐藏从模态隐藏淡入给<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">希望这将适合你。

Answer 9

又一个原因/解决方案！我有我的JS代码：

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

但我的HTML代码已经写成：

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

所以这是重复输入代码并导致模态打开然后关闭的另一种排列。在我的例子中，根据Bootstrap文档，html中的data-target和data-toggle已经触发了模态工作。因此JS代码是多余的，并且在删除时，它可以工作。

Answer 10

我也遇到了这个问题，如果按钮位于标签内，那么模态会出现一次并很快消失，从表单中取出按钮固定了标记。谢谢，我最终在这个帖子中！全部+1。

Answer 11

在我的情况下，我将CDN包含在application.html.erb的头部并且还安装了'jquery-rails'gem，我猜这要归功于上面的文档和帖子，这是多余的。

我只是从application.html.erb的头部注释掉CDN（下面），并且模态适当地保持打开状态。

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

Answer 12

我有同样的问题，但它有不同的原因。我按照文档编写了一个按钮，如下所示：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

当我点击它时，似乎什么都不会发生。但是，按钮位于<form>中，暂时只是抓取同一页面。

我通过将type="button"添加到按钮元素来修复此问题，以便在单击时不会提交表单。

Answer 13

我也有同样的问题。我的问题是我在按下链接时显示模态并提示用jquery进行确认。

下面的代码显示了模态，并立即消失：

<a href="" onclick="do_some_stuff()">Hey</a>

我最后添加'＃'到href所以链接不会去任何地方，它解决了我的问题。

<a href="#" onclick="do_some_stuff()">Hey</a>

Answer 14

我知道这是旧的，但这是另一件要检查的事情 - 确保你只有一个data-target =属性。我复制了它，结果是按照这个帖子。

Answer 15

我通过bootstrap将bower添加到我的项目中，然后我导入了bootstrap.min.js文件并在modal.js文件之后。（打开模态的按钮位于表单内）。我只是删除了modal.js的导入，它对我有用。

Answer 16

如果有人使用codeigniter 3 bootstrap与数据表。

下面是我在config / ci_boostrap.php中的修复

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

Answer 17

不得不面对同样的问题。原因与@merv相同。问题是在页面中添加了日历组件。组件本身添加了要在日历弹出窗口中使用的模式功能。

因此，打破模态弹出窗口的原因将是以下一个或多个

加载多个bootstrap js版本/文件（缩小...）
将外部日历添加到使用引导程序的页面
将自定义警报或弹出库添加到页面
任何其他添加弹出行为的库

Answer 18

在使用Angular（5）时，我遇到了同样的问题，但在我的情况下，我解决了如下问题：

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

注意：需要在ts文件中导入jquery为“declare var $：any;”

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

我所做的改变：

从Button标签中删除了“data-toggle =”modal“（感谢@miCRoSCoPiC_eaRthLinG这个答案对我有帮助）在我的情况下它显示模态所以我创建了（click）=”showresult（）“
在component.ts中需要声明Jquery（$）和内部按钮单击方法showresult（）调用“$（'＃myModal'）。modal（'show'）;”

Answer 19

0
投票

你试过删除吗？

data-dismiss="modal"

Answer 20

对我来说，有效的是删除

data-toggle="modal"

从按钮。按钮本身可以是任何元素 - 链接，div，按钮等。

Answer 21

在这个问题的其他有用答案之后，我在我的mvc应用程序中查找了一段重复的引导程序引用。

终于找到了它 - 它被包含在我正在使用的另一个库中，因此根本不显而易见！（datatables.net）。

如果仍然遇到此问题，请查找可能包含bootstrap的其他库。（datatables.net允许您指定带或不带引导程序的下载 - 其他人也这样做）。

所以我从我的bootstrap.min.js中删除了bundle.config并且一切正常。

Answer 22

同样的症状，在bootstrap-sass gem提供的带有Bootstrap的Rails应用程序的上下文中，@ merv的回答让我走上正轨。

我的application.js文件有以下内容：

//= require bootstrap
//= require bootstrap-sprockets

解决方法是删除两行中的一行。确实，宝石的自述文件警告你这个错误。我的错。

Answer 23

e.preventDefault();和jquery ui

对我来说，jquery ui按钮上的click方法覆盖会出现此问题，默认情况下会导致页面重新加载。

Answer 24

我的代码以某种方式将bootstrap.min.js包含两次。我删除了其中一个，现在一切正常。

Answer 25

如果使用jquery两次附加事件侦听器，也会发生此问题。例如，您将设置不解除绑定：

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

如果发生这种情况，事件将连续触发两次并且模态消失。

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

见例子：http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

Answer 26

我遇到了@gpasse在他的例子中显示的相同症状。这是我的代码......

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

正如@Bhargav建议的那样，我的问题是由于按钮试图提交表单并重新加载页面。我将按钮更改为<a>链接，如下所示：

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

......它解决了这个问题。

注意：我没有足够的声誉来简单地添加评论或upvote，我觉得我可以添加一些澄清。

Bootstrap Modal立即消失

问题描述投票：187回答：26

26个回答

一个可能的原因

调试技巧

一个（破碎的）演示

Plunker

最新问题

Bootstrap Modal立即消失

问题描述 投票：187回答：26

26个回答

一个可能的原因

调试技巧

一个（破碎的）演示

Plunker

最新问题

问题描述投票：187回答：26