Bootstrap Modal立即消失
我正在使用bootstrap在网站上工作。
基本上，我想在主页中使用一个模式，由英雄单位的button召唤。
button代码：
<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>
问题是，只要我点击button，模态消失，然后立即消失。
我会很感激任何帮助。
另外，如何改变下拉三angular形的颜色（指向上，没有hover）？ 我在一个基于橙色和棕色的网站上工作，蓝色的东西真的很烦人。
一个可能的原因
这是Modal插件的JavaScript被加载两次的典型行为。 请检查以确保该插件没有得到双重加载。 根据您使用的平台，模态代码可以从一个数字源加载。 一些常见的是：
- bootstrap.js （完整的BootStrap JS套件）
- bootstrap.min.js （同上，只是缩小）
- bootstrap-modal.js （独立插件）
- 依赖加载器，例如
require('bootstrap')
debugging技巧
一个好的开始是使用浏览器中的开发者工具来检查注册的click事件监听器。 例如，Chrome会列出可以find注册侦听器的代码的JS源文件。 另一个select是尝试在页面上search模态代码中find的短语，例如var Modal 。
不幸的是，这些并不总是在所有情况下find事物。 检查networking请求可以更强大一点给你一个页面上加载的所有图片。
（已损坏）演示
下面是加载bootstrap.js和bootstrap-modal.js时会发生什么情况的演示（仅用于确认您的体验）：
Plunker
如果您向下滚动到该页面源代码的底部，则可以删除或注释bootstrap-modal.js的<script>行，然后validation现在模式将如预期般运行。
我有同样的问题，但有不同的原因。 我跟随了文档，并创build了一个button，如下所示：
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>
当我点击它，似乎什么都不会发生。 然而，button是在一个<form> ，暂时只是获取相同的页面。
我通过向button元素添加type="button"来解决这个问题，这样在点击时不会提交表单。
我寻找了一段时间在我的mvc应用程序中的重复引导引用，在这个问题上的其他有用的答案之后。
终于find了 – 它被包含在我正在使用的另一个库中，所以一点也不明显！ （ datatables.net ）。
如果您仍然遇到这个问题，请查找可能包含bootstrap的其他库。 （ datatables.net允许你指定一个下载有或没有引导 – 其他人也是这样做的）。
所以我从我的bundle.config删除了bootstrap.min.js ，并且一切正常。
同样的症状，在Bootstrap bootstrap-sass gem提供的Bootstrap的Rails应用程序的上下文中，@ merv的答案让我走上了正确的轨道。
我的application.js文件有以下内容：
//= require bootstrap //= require bootstrap-sprockets
解决办法是删除两条线中的一条。 事实上，gem的自述会警告你这个错误。 我的错。
这个问题也可能发生，如果使用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
对我来说，工作是去除
data-toggle="modal"
从button。 button本身可以是任何元素 – 链接，div，button等
我的代码不知何故包含了两次bootstrap.min.js。 我删除了其中一个，现在一切正常。
e.preventDefault(); 与jQuery的用户界面
对我来说，这个问题发生在jquery uibutton上的click方法覆盖，导致默认情况下单击页面重新加载。
我遇到了@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所说，我的问题是由于button试图提交表单，并重新加载页面。 我将button更改为<a>链接，如下所示：
<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>
…并解决了这个问题。
注意：我没有足够的声望来添加评论或点赞，而且我觉得我可以补充一点说明。
在我的情况下，我只有一个bootstrap.js，包括jquery.js文件，但仍然得到这种types的错误，我的button代码是这样的：
<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>
我今天自己遇到了这个问题，碰巧只有在Chrome中。 是什么让我意识到这可能是一个渲染问题。 将特定的模式移动到它自己的渲染层解决它。
#myModal { -webkit-transform: translate3d(0, 0, 0); }
我也有同样的问题，但对我来说，这是因为我有一个buttontypes“提交”内的模式forms。 我变了
<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.'/>
这就解决了失踪问题。
我有一个与asp.net项目工作相同的问题。 我正在使用bootstrap 3.1.0解决了它降级到Bootstrap 2.3.2。
我在移动设备上进行testing时遇到了同样的问题，这个技巧对我来说很有帮助
<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a>
更改button到锚点标签它应该工作，问题发生，因为它的typesbutton，因为它正在尝试提交，所以模态立即消失。并且也删除隐藏模式隐藏淡出给<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">希望这对你有效。
在我的情况下，点击一个button导致（不想）重新加载页面。
这是我的修复：
<button class="btn btn-success" onclick="javascript: return false;" data-target="#modalID" data-toggle="modal">deaktivieren</button>
我也有这个问题，如果button是在一个 标签，然后模式出现一次，消失很快，把button的forms固定isue。 感谢我结束了这个线程！ +1给所有人。
就我而言，我在application.html.erb的头部包含了CDN，并且还安装了“jquery-rails”gem，我猜这要归功于上面的文档和post，是多余的。
我只是从application.html.erb的头部注释掉了CDN（下面），并且模态保持打开状态。
<!--<script src="ajax/bootstrap/3.3.4/bootstrap.min.js"></script>-->
我也有同样的问题。 与我的问题是我显示模式上按下一个链接，并提示用jQuery确认。
下面的代码显示了模态，并立即消失：
<a href="" onclick="do_some_stuff()">Hey</a>
我最终添加了'＃'到href，所以链接不会去任何地方，它解决了我的问题。
<a href="#" onclick="do_some_stuff()">Hey</a>
在我的情况下，我有使用MVC的actionlinkbutton，我面临这个问题，我已经尝试了很多解决scheme上面和其他，但仍然面临这个问题，然后我意识到我的代码错误。
我使用$（'＃ModalId'）在JavaScript中调用了模态（Modal（'show'）;
在错误之前我使用这个button
<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>
我没有这个button中的href属性值，所以我面临的问题。
然后我编辑这个button代码就像这样
<a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>
然后问题得到解决只是一个错误，因为没有＃在第一个。
看看这会对你有帮助。
我知道这是旧的，但这是另一件要检查 – 确保你只有一个data-target =属性。 我已经复制它，结果是按照这个线程。
