时间戳

首页 > 解决方案 > 无法在页面加载时加载模式。标准引导方法不起作用。不知道为什么

jquery - 无法在页面加载时加载模式。标准引导方法不起作用。不知道为什么

问题描述

所以我试图让一个模式在页面加载时加载。这应该是一个相当标准和常规的练习，但它拒绝工作！它在点击时工作得很好。

bootstrap 和 jquery 脚本加载如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>

在页面加载时加载模式的代码是：

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

它是标题部分的最后一件事。

在 body 中，modal 定义如下：

<div class="modal fade show" id="firstEvent" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Came Here to Live:</h4>
            <button type="button" class="close" data-dismiss="modal" arialabel="Close">
                <span aria-hidden="true"><i class="fa fa-times"></i></span>
            </button>

        </div>
        <div class="modal-body">
            <h5>Resilience and Resistance in the Containment Zone</h5>
            <p> Came Here to Live offers a vision of what is possible when we build new models for an inclusive and just society, embrace our intrinsic interdependence, and see our futures as interconnected.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" onclick="window.location.href = 'https://abdproductions.us14.list-manage.com/track/click?u=7236fd78e87c77b23342edecd&id=38b8a0ef9b&e=d9d32ec828'">Purchase tickets</button>
        </div>
    </div>
</div>

我错过了什么？

标签： jquerybootstrap-4

解决方案

哎呀。。抓到了。模态ID应该用双引号括起来！

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

它现在有效！

推荐阅读