twitter-bootstrap Bootstrap 模式在页面加载时打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28068119/
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 opening on page load
提问by Paul
I got a page with a bootstrap modal on it (manual: http://getbootstrap.com/javascript/#modals).
我有一个带有引导模式的页面（手册：http: //getbootstrap.com/javascript/#modals）。
I would like to have this modal open on page load. However this is not happening.
我想在页面加载时打开这个模式。然而，这并没有发生。
<!-- Modal -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4>
</div>
<div class="modal-body">
<p>However the account provided is not known.<BR>
If you just got invited to the group, please wait for a day to have the database synchronized.</p>
<p>You will now be shown the Demo site.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
$('#memberModal').modal('show');
//-->
</script>
Now if I add a button to the code. The modal is opening when I press the button.
现在，如果我在代码中添加一个按钮。当我按下按钮时，模态正在打开。
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#memberModal">
Launch modal
</button>
I tried several things, but I can't get it to work that the modal opens itself on page load. I have both the js and css of bootstrap called in the html head.
我尝试了几件事，但我无法让它在页面加载时自动打开模式。我在 html 头中同时调用了 bootstrap 的 js 和 css。
<!-- Bootstrap - Latest compiled and minified CSS -->
<link rel="stylesheet" type='text/css' href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Bootstrap - Latest compiled and minified JavaScript -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
What am I doing wrong?
我究竟做错了什么？
采纳答案by Paul
I found the problem. This code was placed in a separate file that was added with a php include() function. And this include was happening before the Bootstrap files were loaded. So the Bootstrap JS file was not loaded yet, causing this modal to not do anything.
我发现了问题。这段代码被放置在一个单独的文件中，该文件添加了一个 php include() 函数。这个包含发生在加载 Bootstrap 文件之前。所以Bootstrap JS文件还没有加载，导致这个模态没有做任何事情。
With the above code sample is nothing wrong and works as intended when placed in the body part of a html page.
上面的代码示例没有错，并且在放置在 html 页面的正文部分时按预期工作。
<script type="text/javascript">
$('#memberModal').modal('show');
</script>
回答by haxtbh
Use a document.ready()event around your call.
document.ready()在您的通话周围使用一个事件。
$(document).ready(function () {
$('#memberModal').modal('show');
});
jsFiddle updated - http://jsfiddle.net/uvnggL8w/1/
jsFiddle 更新 - http://jsfiddle.net/uvnggL8w/1/
