我根本不懂JavaScript。Bootstrap文档说到
通过JavaScript调用modal: $('#myModal').modal(options)
我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。
我根本不懂JavaScript。Bootstrap文档说到
通过JavaScript调用modal: $('#myModal').modal(options)
我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。
当前回答
使用Bootstrap 3和jQuery(2.2和2.3)进行测试
$(window).on('load',function(){
$('#myModal').modal('show');
});
<!-- 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"><i class="fa fa-exclamation-circle"></i> //Your modal Title</h4>
</div>
<div class="modal-body">
//Your modal Content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/d7utnsbm/
其他回答
为了避免引导被否决并失去它的功能,只需创建一个常规的启动按钮,为它提供一个Id,然后使用jquery“点击它”,如下所示: 启动按钮:
<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
See what´s new!
</button>
jQuery触发器:
$(document).ready(function () {
$('#btnAnouncement').click();
)}
希望能有所帮助。干杯!
您可以通过数据属性激活模态,而不需要编写任何JavaScript。
选项"show"设为true显示初始化时的模态:
<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>
在bootstrap 3中,你只需要通过js初始化模态,如果在页面加载的时刻,模态标记在页面中,模态就会显示出来。
如果你想防止这种情况,可以在初始化模态的地方使用show: false选项。就像这样: $ (' .modal ')。Modal ({show: false})
你可能想要保持jquery.js延迟,以更快的页面加载。但是,如果jquery.js被延迟到$(window)。负载可能不工作。那么你可以试试
setTimeout(function(){$('#myModal').modal('show');},3000);
它会在页面完全加载后弹出你的模态(包括jquery)
使用Bootstrap 3和jQuery(2.2和2.3)进行测试
$(window).on('load',function(){
$('#myModal').modal('show');
});
<!-- 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"><i class="fa fa-exclamation-circle"></i> //Your modal Title</h4>
</div>
<div class="modal-body">
//Your modal Content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/d7utnsbm/