页面加载时引导 4 模式没有 jquery？

Question

使用 Bootstrap 4 在页面加载时显示模式非常困难。这是模式的代码......它直接来自在线资源：

</body>

<div class="modal fade" id="cookieModal" style="display: block;>
 <div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Modal title</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Modal body content...........</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">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="/public/js/logic.js"></script>

</body>

我想通过为模态添加一个“id”名称并使用“style =“display：block”我可以使用纯 Javascript 控制显示。例如在我的外部（“逻辑”）文件中：

addEventListener("load", initialize); 


function initialize() {

var _warning = document.getElementById("cookieModal");  //for cookie modal display on page load...
_warning.style.display = "block";  //show the cookie modal...

}

但是模态似乎没有显示。 任何人都可以在不使用 JQuery 的情况下给出一些建议......纯 JS 会很棒。 我不喜欢 JQuery 并且不使用它。 我提前谢谢你。

Answer 1

如果我有你的问题，这将起作用； 使用 jquery；（很抱歉使用 jquery，但这是引导程序显示的方式。）

 $(document).ready(function() {
    $('#cookieModal').modal('show');
//If you want to hide it automatically after 5 secs.
    setTimeout(function() {
      $("#cookieModal").modal('hide');
    }, 5000);
  });

Answer 2

Bootstrap 4 模态需要 jQuery。 仅仅改变显示属性是不够的。

如果您不想使用 jQuery，请使用最新版本的 Bootstrap (5.0.0)，它不需要 jQuery。