我根本不懂JavaScript。Bootstrap文档说到

通过JavaScript调用modal: $('#myModal').modal(options)

我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。


当前回答

除了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>

其他回答

<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
          <p><i class="icon-spinner icon-spin icon-4x"></i></p>
    </div>
</div>

即使没有Javascript,你也可以在开始时显示它。只需删除类“hide”。

class="Modal"

你可能想要保持jquery.js延迟,以更快的页面加载。但是,如果jquery.js被延迟到$(window)。负载可能不工作。那么你可以试试

setTimeout(function(){$('#myModal').modal('show');},3000);

它会在页面完全加载后弹出你的模态(包括jquery)

为了避免引导被否决并失去它的功能,只需创建一个常规的启动按钮,为它提供一个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();
)}

希望能有所帮助。干杯!

只需将你想要在页面加载时调用的模态包装在文档头部的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>

在bootstrap 3中,你只需要通过js初始化模态,如果在页面加载的时刻,模态标记在页面中,模态就会显示出来。

如果你想防止这种情况,可以在初始化模态的地方使用show: false选项。就像这样: $ (' .modal ')。Modal ({show: false})