在页面加载时启动 Bootstrap 4v6 模式？

Question

我正在尝试使用 Bootstrap 4 的最新框架开发订阅弹出模式框。但是，我不希望我的客户单击按钮进行订阅，我希望订阅框弹出页面加载后立即启动。经过无数次教程，每一个都失败了。有谁知道如何解决这个问题？

   <div id="myModal" class="modal fade" role="dialog">
 <div class="modal-dialog">
   <!-- Modal content-->
   <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal">&times;</button>
       <h4 class="modal-title">Modal Header</h4>
     </div>
     <div class="modal-body">
       <p>Some text in the modal.</p>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     </div>
   </div>

 </div>

<script>
$(window).load(function(){
 $('#myModal').modal('show');
 });
  </script>

Answer 1

有时在调用函数时没有加载元素。尝试在

这样的超时时间使用它

setTimeout(()=>{
    $('#myModal').modal('show');
}, 5000)

如果它在工作 -> 找到一个更好的解决方案来确定组件是否已经加载

如果不工作 -> 控制台有提示吗？尝试调试并查看 $('myModal') 是否确实返回元素以及是否定义了“.modal”。

Answer 2

您的模态框缺少结尾 </div>。还要确保在 bootstrap.js.

之前包含 jquery

https://www.codeply.com/go/gMtlZbdyHi

在页面加载时启动 Bootstrap 4v6 模式？

Launch Bootstrap 4v6 Modal on page load?

jquery

bootstrap-modal

bootstrap-4

twitter-bootstrap-4