[英]How to make modal dialog open at page load in bootstrap
在Bootstrap中使用javascript顯示模態對話框很容易。
但是如何在頁面加載時打開模態而不需要document.ready
函數或body onload
函數?
我需要加載頁面並打開模態。 頁面加載時我不想要延遲或過渡效果。 我希望模態在啟動時打開。
我看了一下modal.js並嘗試在body上添加class="modal-open"
而沒有任何效果。
<div class="modal in" id="journalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">modal title</h4>
</div>
<div class="modal-body">
body
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
可能嗎? 怎么做 ?
當模態變得可見時,Bootstrap將.in
類添加到它的容器中。 因此,您可以在css中添加一個規則,如下所示,並將相同的類添加到模態 - 您希望在頁面加載時可見。
CSS
.modal.in {
display:block;
}
HTML
<div class="modal in">visible on page load.</div>
但這些不會帶來模式背景。 所以你必須將這些保留在頁面底部:
<div class="modal-backdrop fade in"></div>
從Andres Ilich看一下這個Launch Bootstrap Modal的頁面加載
JS
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.