我一点都不懂JavaScript。引导程序文档说
通过JavaScript调用模态:$('#myModal')。模式(选项)
我不知道如何在页面加载时调用它。使用Bootstrap页面上提供的代码,我可以在元素单击时成功调用model,但我希望在页面加载时立即加载它。
只需将要在页面加载中调用的模式包装在文档头部的jQueryload
事件中,它就会弹出,如下所示:
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>
你不需要javascript
来显示modal
最简单的方法是用“in”替换“hide”
class="modal fade hide"
所以
class="modal fade in"
您需要在按钮关闭时添加onclick=“$('.modal').hide()”
;
PS:我认为最好的方法是添加jQuery脚本:
$('.modal').modal('show');
只需加上以下内容-
class="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 show" 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>