javascript - 打开引导模式 js 不起作用

Question

我已经阅读了很多其他人关于这个主题的帖子，并且都有相同的解决方案。但不知何故，它对我不起作用，我怀疑我错过了什么，但无法找出是什么。

我想显示一个带有页面加载的引导模式(最后如果有一个特殊的 $_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 事件，并为脚本尝试了不同的位置，以及通过 Id 或类和上述代码的不同版本调用模态。到目前为止没有任何效果。我希望你能帮我指出我的错:)

提前致谢!

Answer 1

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

JS

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

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

>