twitter-bootstrap 页面 Bootstrap 3 中的模式加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20068962/
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
Modal onload in page Bootstrap 3
提问by Barbara Ester
I would like to know how do I make modal automatic when the index page is triggered?
我想知道如何在触发索引页面时使模态自动？
I would like to open one modal index came on the screen, what should I change in bootstrap 3 to come this effect?
我想打开一个模态索引出现在屏幕上，我应该在bootstrap 3中改变什么才能达到这个效果？
Modal in onload window in open page.
打开页面的加载窗口中的模态。
Thanks for the help guys.
谢谢你们的帮助。
I put in the following way
我用以下方式
I'm doing something wrong?
我做错了什么？
<script type="text/javascript">
$( document ).ready( function() {
$( '#teste' ).modal( 'toggle' );
});
</script>
<!-- Modal -->
<div class="modal fade in" id="teste" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
回答by Jérémy Dutheil
$( document ).ready( function() {
$( '#myModal' ).modal( 'toggle' );
});
Is that what you're looking for ?
这就是你要找的吗？
回答by juniorb2s
try:
尝试：
<script type="text/javascript">
$(document).ready(function() {
$('#teste').modal({
show: true,
})
});
</script>
Example:
例子：
<!-- css -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" >
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').modal({
show: true,
})
});
</script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
回答by jfgrissom
Your code will actually work. The thing you are doing wrong is the placement of the javascript portion.
您的代码实际上会起作用。你做错的是javascript部分的位置。
You simply need to put the javascript portion of your code at the bottom of your document just before the closing body tag.
您只需将代码的 javascript 部分放在文档底部的正文结束标记之前。
I just tested your code, as is, with a long document and it fails. All I did was move your javascript to the bottom of the page and it works perfectly.
我刚刚用一个很长的文档按原样测试了您的代码，但它失败了。我所做的只是将您的 javascript 移动到页面底部，它运行良好。
There is another stack overflow that talks about why this is a best practice in some cases (JavaScript on the bottom of the page?).
还有另一个堆栈溢出讨论了为什么在某些情况下这是最佳实践（页面底部的 JavaScript？）。
Best to you!
给你最好的！
