CODEWITHSUNDEEP
javascripttwitter-bootstrapbootstrap-modal
aarelovich
aarelovich

Reputation: 5566

Cannot get Modal in Bootstrap 5 to open up using JavaScript

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?

Upvotes: 2

Views: 10046

Answers (2)

Nemanja
Nemanja

Reputation: 3669

First, you are missing new keyword. Second, you call bootstrap.Modal function passing it element with wrong id.

This code will work :

var myModal = document.getElementById("staticBackdrop");
  var modal = new bootstrap.Modal(myModal);
  modal.show();

Upvotes: 1

Samuel Anyanwu
Samuel Anyanwu

Reputation: 315

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>

Upvotes: 7

Related Questions