如何在Bootstrap中使模态对话框在页面加载时打开

Question

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

但是如何使模态对话框在页面加载时打开，而不需要document.ready函数或bodyonload 函数?

我的需求是加载页面并已经打开模态对话框。 我不想延迟加载，也不想在页面加载时有任何过渡效果。 我希望模态对话框在启动时打开。

我查看了一下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">&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 -->

这是可能的吗？ 如何做到？

- fluminis

---

我想这个 JSFiddle 非常不错 http://jsfiddle.net/yashhy/sj9EQ/1/ - yashhy

Answer 1

当模态框变为可见时，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>

- absqueued

---

完美运行！ 我只需要删除淡入类以使模态背景不完全变暗。 <div class =“modal-backdrop in”> </ div> - fluminis

Answer 2

请查看在页面加载时启动Bootstrap模态框，作者是Andres Ilich。

JS

<script type="text/javascript">    
    $(window).load(function(){
        $('#myModal').modal('show');
    });
</script>

- Nishant

---

作者明确要求一种不需要使用“document.ready函数或body.onload函数”的解决方案。我认为$(window).load与onload差不多，因此投了反对票。 - Joel Cross

然而对于一些人来说仍然很有用 - 对于现代版本的jQuery，也必须将$(window).load(...)替换为$(windows).on('load', ....)。要消除“淡入淡出”效果，只需从模态框中删除“fade”类即可。 - hello_earth