javascript - Bootstrap 4 modal on page load sans 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

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.