Question

我已阅读过很多其他人关于此主题的帖子，并且都有相同的解决方案。但不知怎的，它对我不起作用，我怀疑我错过了什么，却找不到什么。

我想显示一个带有页面加载的bootstrap模式（最后如果有一个特殊的$ _GET事件，为什么我以后需要php）。

这是我的模态，在按钮触发时显示，但在页面加载时不显示：

<div id = "detail-modal" class="modal fade detail-modal" role="dialog" aria-labelledby="meinGroßesModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="rasterSystemModalLabel">test</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div id="detail-modal-content" class="col-md-12">
                            test
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
            </div>

        </div>
    </div>
</div>

这是相应的js应该有效，因为大多数人似乎都在使用它：

<script type='text/javascript'>
    $(document).ready(function(){
        $('#detail-modal').modal('show');
    });
</script>

我还尝试触发模态的onload-event并尝试不同的脚本位置，以及通过Id或类以及上述代码的不同版本调用模态。到目前为止没有任何工作。我希望你能帮助并告诉我我的错误:)。

提前致谢！

Answer 1

只需将页面加载时要调用的模式包装在文档头部的jQuery加载事件中，它就会弹出，如下所示：

<强> JS

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

<强> HTLML

    <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

＆GT;

open bootstrap modal js不起作用

1 个答案: