How can I trigger a Bootstrap modal programmatically?
This is a code for Bootstrap v5 without jQuery.
let myModal = new bootstrap.Modal(document.getElementById('myModal'), {});
myModal.show();
Demo
And this is a codesandbox demo to open modal on page load programmatically.
https://idu6i.csb.app/
Refs
- https://getbootstrap.com/docs/5.0/components/modal/#via-javascript
- https://getbootstrap.com/docs/5.0/components/modal/#show
You should't write data-toggle="modal" in the element which triggered the modal (like a button), and you manually can show the modal with:
$('#myModal').modal('show');
and hide with:
$('#myModal').modal('hide');
In order to manually show the modal pop up you have to do this
$('#myModal').modal('show');
You previously need to initialize it with show: false
so it won't show until you manually do it.
$('#myModal').modal({ show: false})
Where myModal
is the id of the modal container.