如何在引导程序中的页面加载时打开模态对话框 [英] How to make modal dialog open at page load in bootstrap

问题描述

在Bootstrap中使用javascript显示模态对话框很容易。

It's easy to show a modal dialog with javascript in Bootstrap.

但如何在页面加载时打开模态而不需要 document.ready 函数或正文 onload 函数？

But how to make the modal open at page load without the need of a document.ready function or a body onload function?

我需要的是加载页面并打开模态。
我不想在页面加载时出现延迟或过渡效果。
我希望模态在启动时打开。

My need is to load a page and have the modal allready opened. I don't want a delay nor a transition effect when the page load. I want that the modal is opened at startup.

我看一下modal.js并尝试添加 class =身体上的模态打开无效。

I look the modal.js a little bit and tried adding class="modal-open" on the body with no effect.

<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">&times;</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 -->

有可能吗？
如何做？

Is it possible? How to do it ?

推荐答案

当模态变为可见时，Bootstrap会添加 .in 类的容器。因此，您可以在css中添加一个规则，如下所示，并将相同的类添加到模态 - 您希望在页面加载时可见。

When modal becomes visible, Bootstrap adds .in class to the it's container. So you can add a rule in your css as below and add the same class to modal - which you want to be visible at page load.

CSS

.modal.in {
   display:block;
}

HTML

<div class="modal in">visible on page load.</div>

但这些不会带来模态背景。所以你必须将这些保留在页面底部：

But these will not bring the modal backdrop in place. So you gotta keep those also in bottom of page:

<div class="modal-backdrop fade in"></div>

这篇关于如何在引导程序中的页面加载时打开模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！