我根本不懂JavaScript。Bootstrap文档说到
通过JavaScript调用modal: $('#myModal').modal(options)
我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。
我根本不懂JavaScript。Bootstrap文档说到
通过JavaScript调用modal: $('#myModal').modal(options)
我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。
当前回答
你不需要javascript来显示模态
最简单的方法是将"hide"替换为"in"
class="modal fade hide"
so
class="modal fade in"
你需要添加onclick = "$('.modal').hide()"按钮关闭;
PS:我认为最好的方法是添加jQuery脚本:
$('.modal').modal('show');
其他回答
只需将你想要在页面加载时调用的模态包装在文档头部的jQuery load事件中,它就会弹出,如下所示:
JS
<script type="text/javascript">
$(window).on('load', function() {
$('#myModal').modal('show');
});
</script>
HTML
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
你仍然可以在你的页面中调用模态,通过这样的链接调用它:
<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>
更新2021
引导5
现在Bootstrap不再需要jQuery,使用JavaScript显示模态很容易。
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
myModal.toggle()
Demo
引导4
Bootstrap 4的模式标记略有变化。下面是如何在页面加载时打开模态,并可选地延迟显示模态…
$(window).on('load',function(){
var delayMs = 1500; // delay in milliseconds
setTimeout(function(){
$('#myModal').modal('show');
}, delayMs);
});
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">My Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Demo
在bootstrap 3中,你只需要通过js初始化模态,如果在页面加载的时刻,模态标记在页面中,模态就会显示出来。
如果你想防止这种情况,可以在初始化模态的地方使用show: false选项。就像这样: $ (' .modal ')。Modal ({show: false})
您可以通过数据属性激活模态,而不需要编写任何JavaScript。
选项"show"设为true显示初始化时的模态:
<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>
您可以尝试这个可运行的代码-
$(window).load(function() { $('#myModal').modal('show'); }); <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>
更多信息可以在这里找到。
我想你已经有了完整的答案。