Cannot get Modal in Bootstrap 5 to open up using JavaScript

Question

I'm currently trying to create a loading dialog with bootstrap 5.

So the first thing I did is copied to the dialog from the documentation into my test html:

        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog" id = "waitDialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                   Some Stuff. 
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </div>
            </div>
        </div>  

Then I wrote a bit of JS to try to open it up following the instructions in the documentation

  var myModal = document.getElementById('waitDialog');
  var modal = bootstrap.Modal.getInstance(myModal)
  modal.show();

This is comming straight from the documetation at https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

I doesn't work because modal is null. What am I doing wrong?

Answer 1

There are two problems with your code.

First, the getInstance method returns the modal instance associated with the DOM element, since it returns null, it means the modal has not been initialized. There's another method getOrCreateInstance, which should create the instance if none was found (https://getbootstrap.com/docs/5.0/components/modal/#getorcreateinstance).

Second, the modal element is the containing div with the classname of modal not the one with id waitDialog.

So ideally, your code should look something like this https://jsfiddle.net/7m1oqc9d/3/

var myModal = document.getElementById('staticBackdrop');
var modal = bootstrap.Modal.getOrCreateInstance(myModal)
modal.show()

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog" id="waitDialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                   Some Stuff. 
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </div>
            </div>
        </div>