twitter-bootstrap bootstrap-modal 不显示对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16729464/
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 the dialog
提问by Pez
I'm using bootstrap in rails application. I tried to show dialog box using bootstrap-modal, but the dialog box doesn't come for me. Here is my view code.
我在 rails 应用程序中使用引导程序。我尝试使用 bootstrap-modal 显示对话框，但对话框不适合我。这是我的视图代码。
<div id="creative_attachment_popup" class="modal hide fade" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>Do you eant to continue../p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
And simply, I call the js file as
简单地说，我将 js 文件称为
$('#creative_attachment_popup').modal('show');
the above code shows only a fade page and dosn't contain any dialog. When I type the above js line in my console it shows the following:
上面的代码只显示了一个淡入淡出的页面，不包含任何对话框。当我在控制台中键入上面的 js 行时，它显示以下内容：
<div id=?"creative_attachment_popup" class=?"modal hide fade in ui-dialog-content ui-widget-content" role=?"dialog"> <h1 style=?"display:? block;?" aria-hidden=?"false">?…?</div>?
Refer the above code with my html. Why am I getting this?
用我的html参考上面的代码。为什么我得到这个？
回答by The Finest Artist
You have to include jQuery.js before, then bootstrap.js!!
你必须先包含 jQuery.js，然后是 bootstrap.js！！
And do not use simplified form of html for script. (like <script src=""/>) you have to close it like <script src=""></script>)
并且不要在脚本中使用 html 的简化形式。（就像<script src=""/>）你必须像<script src=""></script>）一样关闭它
<!-- JQuery -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<!-- BootStrap Link -->
<link rel="stylesheet" type="text/css" href="/linker/styles/vendor/bootstrap.css">
<script type="text/javascript" src="/linker/js/vendor/bootstrap.js"></script>
Have you called $('#creative_attachment_popup').modal('show');after the document is ready?
你$('#creative_attachment_popup').modal('show');在文件准备好后打电话了吗？
$(function() {
$('#creative_attachment_popup').modal('show');
});
回答by Calvin Zhang
Check the following:
检查以下内容：
- Did you include jQuery.js?
- Did you include bootstrap.js? (You must include jQuery before bootstrap)
- Did you include bootstrap.css?
- Go to Javascript Console of the browser (Firebug/Chrome Dev Tool), make sure there is not any errors.
- 你包括 jQuery.js 吗？
- 你包含了 bootstrap.js 吗？（你必须在引导前包含 jQuery）
- 你包括 bootstrap.css 吗？
- 转到浏览器的 Javascript 控制台（Firebug/Chrome Dev Tool），确保没有任何错误。
I copied and pasted your code into a blank page and then added the following head:
我将您的代码复制并粘贴到一个空白页面中，然后添加了以下标题：
<link href="bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap.js" type="text/javascript"></script>
Then I ran
然后我跑了
$('#creative_attachment_popup').modal('show');
The medal popup with everything on it. So I guess you may not include everything (or include something wrong).
奖牌弹出窗口，上面有所有内容。所以我猜你可能没有包含所有内容（或包含错误的内容）。
