我根本不懂JavaScript。Bootstrap文档说到
通过JavaScript调用modal: $('#myModal').modal(options)
我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。
我根本不懂JavaScript。Bootstrap文档说到
通过JavaScript调用modal: $('#myModal').modal(options)
我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。
当前回答
在我的例子中,添加jQuery来显示模态不起作用:
$(document).ready(function() {
$('#myModal').modal('show');
});
这似乎是因为模态有属性aria-hidden="true":
<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
需要删除该属性以及上面的jQuery:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
请注意,我尝试将模态类从模态渐变更改为模态渐变,但这并不奏效。此外,将模态淡出类更改为模态显示类也阻止了模态关闭。
其他回答
只需将你想要在页面加载时调用的模态包装在文档头部的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>
你可能想要保持jquery.js延迟,以更快的页面加载。但是,如果jquery.js被延迟到$(window)。负载可能不工作。那么你可以试试
setTimeout(function(){$('#myModal').modal('show');},3000);
它会在页面完全加载后弹出你的模态(包括jquery)
更新2020 -引导5
建立在优秀的回应从以前的答案,在Bootstrap 5没有jQuery,这已经工作;
document.querySelector('[data-target="#exampleModal"]').click();
完整的片段:
window.onload = () => { document.querySelector('[data-target="#exampleModal"]').click(); } <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet" /> <div class="container py-3"> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <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" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div>
你不需要javascript来显示模态
最简单的方法是将"hide"替换为"in"
class="modal fade hide"
so
class="modal fade in"
你需要添加onclick = "$('.modal').hide()"按钮关闭;
PS:我认为最好的方法是添加jQuery脚本:
$('.modal').modal('show');
为了避免引导被否决并失去它的功能,只需创建一个常规的启动按钮,为它提供一个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();
)}
希望能有所帮助。干杯!