CODEWITHSUNDEEP
javascriptbootstrap-modalbootstrap-5
noone392
noone392

Reputation: 2158

bootstrap 5 close modal with vanilla javascript

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

Upvotes: 26

Views: 39976

Answers (7)

Rubyx
Rubyx

Reputation: 798

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

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

Upvotes: 4

Milan Jaukl
Milan Jaukl

Reputation: 31

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;

Upvotes: 3

j_allen_morris
j_allen_morris

Reputation: 599

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

Upvotes: 0

Mahad Ahmed
Mahad Ahmed

Reputation: 309

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

Upvotes: 3

Fahimeh Ahmadi
Fahimeh Ahmadi

Reputation: 1029

I used this method

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

Upvotes: -3

noone392
noone392

Reputation: 2158

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.

Upvotes: 81

Ronak Lalwani
Ronak Lalwani

Reputation: 386

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

Upvotes: 1

Related Questions