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.