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
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.
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
I used this method
$('#nameModal').modal('hide');