Bootstrap 页面加载 4 模态 jquery?

Bootstrap 4 modal on page load sans jquery?

使用 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 并且不使用它。提前谢谢你了。

如果我得到你的问题,这会起作用; 使用 jquery;(抱歉使用 jquery 但这是 bootstrap 显示的方式。)

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

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

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