twitter-bootstrap Bootstrap 模式不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20463344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modal doesn't show
提问by stdcerr
I wanted to test out Bootstrap's modal element and created a little test page. But nothing shows up and I'm wondering why, any clues? I got the source from the bootstrap page... My test page is at http://ronhome.no-ip.org/bootstrap/modal.html
我想测试 Bootstrap 的模态元素并创建了一个小测试页面。但什么也没有出现，我想知道为什么，任何线索？我从引导程序页面获得了源代码......我的测试页面位于http://ronhome.no-ip.org/bootstrap/modal.html
采纳答案by Anil Saini
first thing you need to include jquery, and also trigger the modal, either with a button -
首先你需要包含 jquery，并触发模态，或者使用一个按钮 -
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
or show the bootstrap modal using jquery -
或使用 jquery 显示引导模式 -
<script type="text/javascript">
$(document).ready(function(){
$('.modal').modal('show');
});
</script>
回答by damienc88
Your example doesn't have jQuery included.
您的示例不包含 jQuery。
Uncaught Error: Bootstrap requires jQuery
You must include jQuery before including Bootstrap.
在包含 Bootstrap 之前，您必须包含 jQuery。
Also, Bootstrap Modal's need to either be toggled by some kind of control on the page, or by JavaScript: http://getbootstrap.com/javascript/#modals-usage
此外，Bootstrap Modal 需要通过页面上的某种控件或 JavaScript 来切换：http: //getbootstrap.com/javascript/#modals-usage
This means you either need a button with the appropriate data attributes, which would correspond to attributes set on your modal, or execute via javascript
这意味着您需要一个具有适当数据属性的按钮，这将对应于您的模态上设置的属性，或者通过 javascript 执行
via JavaScript:
通过 JavaScript：
$('.modal').modal('show')
$('.modal').modal('show')
Or via attributes on a control:
或者通过控件上的属性：
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
EDIT: If you do this, you need to specify the target as the ID of the modal div
编辑：如果这样做，则需要将目标指定为模态 div 的 ID
<div id="myModal" class="modal fade">
<!--modal content here -->
</div><!-- /.modal -->
回答by Kaleidoscope
You need to include jQuery before Bootstrap.
您需要在 Bootstrap 之前包含 jQuery。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
回答by Shravan Ramamurthy
In my case the bootstrap model was not showing up when i did this
在我的情况下，当我这样做时，引导模型没有出现
$('#myModal').show();
But i modified above piece of code to the one below, then it worked
但是我将上面的一段代码修改为下面的一段，然后它就起作用了
$('#myModal').modal('show');
回答by Reza Amya
you should load your jQuery javascript files, beforebootstrap javascript files!
hope it work
你应该加载你的 jQuery javascript 文件，before引导 javascript 文件！
希望它有效
回答by Raghnall
I don't know if this helpfull or not. I've tried for several hours a lot of these tips. At last I added bg-dark to the modals class and it works.
我不知道这是否有帮助。我已经尝试了几个小时的这些技巧。最后，我将 bg-dark 添加到 modals 类中，并且它起作用了。
so I changed
所以我改变了
<div id="myModal" class="modal fade" role="dialog">
into:
进入：
<div id="myModal" class="modal fade bg-dark" role="dialog">
