我根本不懂JavaScript。Bootstrap文档说到
通过JavaScript调用modal: $('#myModal').modal(options)
我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。
我根本不懂JavaScript。Bootstrap文档说到
通过JavaScript调用modal: $('#myModal').modal(options)
我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。
当前回答
你可能想要保持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');
你可能想要保持jquery.js延迟,以更快的页面加载。但是,如果jquery.js被延迟到$(window)。负载可能不工作。那么你可以试试
setTimeout(function(){$('#myModal').modal('show');},3000);
它会在页面完全加载后弹出你的模态(包括jquery)
我最近需要使用Django消息启动一个Bootstrap 5模态,不使用jQuery,也不使用按钮点击(例如,页面加载)。我是这样做的:
/ HTML模板
<div class="modal" id="notification">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Notification!</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{% for m in messages %}
{{ m }}
{% endfor %}
</div>
<div class="modal-footer justify-content-between">
<a class="float-none btn btn-secondary" href="{% url 'some_view' %}"
type="button">
Link/Button A
</a>
<button type="button" class="btn btn-primary"
data-bs-dismiss="modal">
Link/Button B
</button>
</div>
</div>
</div>
</div>
JS文件或模板
{% block javascript %}
{{ block.super }}
<script>
var test_modal = new bootstrap.Modal(
document.getElementById('notification')
)
test_modal.show()
</script>
{% endblock javascript %}
这个方法在没有Django模板的情况下也可以工作;只需使用HTML并将JS放在一个文件或脚本元素中,在Bootstrap JS结束之前加载body元素。
除了user2545728和Reft的答案,没有javascript,但与情态背景
添加3件事
一个在.modal类之前带有modal- background类的div Style ="display:block;"到.modal类 与.modal类一起淡出
例子
<div class="modal-backdrop in"></div>
<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="channelModal">Welcome!</h4>
</div>
<div class="modal-body" style="height:350px;">
How did you find us?
</div>
</div>
</div>
</div>