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

`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();`... — connexo, Sep 14 '21 at 01:56
that is incorrect. That will not work. You cannot call hide or show on that — noone392, Sep 14 '21 at 01:57
sorry the issue was getting an instance to the handle when you did not open it with javascript — noone392, Sep 14 '21 at 01:58
That is not in the question you asked. Also it's right in the docs: https://getbootstrap.com/docs/5.0/components/modal/#hide — connexo, Sep 14 '21 at 01:59
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 — noone392, Sep 14 '21 at 02:01
it does not. the question is how close it when you DONT HAVE A HANDLE. it was opened with a button NOT WITH JAVASCRIPT — noone392, Sep 14 '21 at 02:01

score 57 · Accepted Answer · answered Sep 14 '21 at 01:55

57

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.

answered Sep 14 '21 at 01:55

noone392

1,624
3
18
30

Not working in 2022. – boctulus Nov 23 '22 at 15:50
2

This DOES work for bootstrap 5.2 – Beau Mar 02 '23 at 16:49
This close the modal, but how to return back to original colors? – HereHere Jul 23 '23 at 16:27

score 1 · Answer 2 · answered Sep 14 '21 at 01:54

1

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

answered Sep 14 '21 at 01:54

Ronak Lalwani

376
2
9

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. – noone392 Sep 14 '21 at 02:12

score 1 · Answer 3 · answered Feb 28 '23 at 17:28

1

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

answered Feb 28 '23 at 17:28

Mahad Ahmed

179
4
7

score 0 · Answer 4 · answered Jul 12 '23 at 16:30

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();
});

score -3 · Answer 5 · answered Jul 03 '22 at 06:38

-3

I used this method

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

answered Jul 03 '22 at 06:38

Fahimeh Ahmadi

813
8
13

1

hey this works, only issue is bootstrap 5 deprecates jquery, which is why I was asking about vanilla javascript. – noone392 Jul 05 '22 at 14:12

bootstrap 5 close modal with vanilla javascript

5 Answers5

Linked