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

Question

I am having great difficulty displaying a modal on page load, using Bootstrap 4. Here is the code for the modal...it comes directly from online resources:

</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>

I thought by adding an "id" name for the modal and using "style="display: block" I could control the display using pure Javascript. For example in my external ("logic") file:

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...

}

However the modal does not seem to display. Can anybody give some advice WITHOUT using JQuery...just pure JS would be great. I dislike JQuery and do not use it. I thank you in advance.

Answer 1

If i got your question this will work; Using jquery;(sorry for using jquery but this is how the bootstrap is showing to do.)

 $(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 modals require jQuery. Just changing the display property is not enough.

If you don't want to use jQuery, use the latest version of Bootstrap (5.0.0), which does not require jQuery for anything.