bootstrap 5 close modal with vanilla javascript

Question

Hello Following the tutorial here https://getbootstrap.com/docs/5.0/components/modal/#via-javascript they use a button to toggle showing the modal. And if you want to show a modal in bootstrap 5 with javascript you basically use var myModal = new bootstrap.Modal(document.getElementById('staticBackdrop')); myModal.show();

My question is how can I close a modal with javascript that was opened with the button. Basically how could I get a handle to that modal that was already opened? I realize once I had the handle I would just call .hide()

---Edit--- To make this clear. in bootstrap 5 when it is opened without using javascript

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

I was trying to get a handle to that modal

Finnigan

var myModal = new bootstrap.Modal(document.getElementById('staticBackdrop')); your own code example already presents the handle myModal. I don't know what is the issue here. You even use the handle to call myModal.show();... – Boston

that is incorrect. That will not work. You cannot call hide or show on that – Finnigan

sorry the issue was getting an instance to the handle when you did not open it with javascript – Finnigan

That is not in the question you asked. Also it's right in the docs: getbootstrap.com/docs/5.0/components/modal/#hide – Boston

I asked how to close the modal when you don't have handle because it was opened with the button as described in bootstrap 5 – Finnigan

it does not. the question is how close it when you DONT HAVE A HANDLE. it was opened with a button NOT WITH JAVASCRIPT – Finnigan

Answer 1

Figured it out.

var myModalEl = document.getElementById('staticBackdrop');
var modal = bootstrap.Modal.getInstance(myModalEl)
modal.hide();

I was missing the bootstrap.Modal.getInstance. Everytime I spend 5 hours staring at something and looking for answers. I finally post here, and immediately figure it out lol.

Finnigan

Not working in 2022. – Celebration

This DOES work for bootstrap 5.2 – Sweat

This close the modal, but how to return back to original colors? – Brevity

Operating in 2024 bootstrap 5.3 – Enrichetta

Answer 2

const myModal = bootstrap.Modal(document.getElementById('myModal'));
myModal.hide();

I have tried other answers and none of them worked for me. I found this in the documentation.

https://getbootstrap.com/docs/5.0/components/modal/#methods

Consult

Answer 3

An easy way to do it with Vanilla Javascript if close button is enabled:

document.querySelector('button.btn-close').click();

Aglimmer

Answer 4

You can use the variable myModal to call methods. Use hide method on your button click to hide your modal: myModal.hide() Read more about methods from here: https://getbootstrap.com/docs/5.0/components/modal/#methods

Rickets

the questions was how to get the handle to a modal that was opened without using javascript in the first place, because that is how bootstrap 5 recommends you do it. – Finnigan

Answer 5

Dont create new instances if you just want to hide modal desclared in HTML. Do instead this:

bootstrap.Modal.getInstance(document.getElementById("foo")).hide();

Include Bootstrap properly if you get error about availability etc. (I work with Vite builder)

import * as bootstrap from 'bootstrap'
window.bootstrap = bootstrap;

Ante

Answer 6

For anyone reading this that can't figure why their modal.hide() isn't working when you're using an eventListener(), here is why:

If you have the code:

document.getElementById('add_tag').addEventListener('click', (e)=>{
    var modal = new bootstrap.Modal(document.getElementById("successModal"));
    modal.show();
});

document.getElementById('addButton').addEventListener('click', ()=>{
    var modal = new bootstrap.Modal(document.getElementById("successModal"));
    modal.hide();
});

You need you realize that in the first one, you can use show() without any issue because you just defined a new modal and modal.show() can reference the new modal.

When you try to click something and make the modal disappear is where the issue happens. You can't create a new modal and then expect it to close the old modal.

Move the var modal = new bootstrap.Modal(document.getElementById("successModal")); outside of the eventListener function. Then both functions can reference var modal, make it show() and hide() without issues.

var modal = new bootstrap.Modal(document.getElementById("successModal"));
document.getElementById('add_tag').addEventListener('click', (e)=>{
    modal.show();
});
document.getElementById('addButton').addEventListener('click', ()=>{
    modal.hide();
});

Undermine

Answer 7

I used this method

$('#nameModal').modal('hide');

Craner

hey this works, only issue is bootstrap 5 deprecates jquery, which is why I was asking about vanilla javascript. – Finnigan