Bootstrap 5 Modal Events

Bootstrap5 Modal Events are the functionality provided by bootstrap to be added to the modals. The modal events are directly triggered at the modal only

Bootstrap 5 Modal Events:

• show.bs.modal: It is fired as soon as the show() method of the instance is called. 
• shown.bs.modal: It is fired when the modal element is completely visible after all the CSS transitions are done.
• hide.bs.modal: It is fired as soon as the hide() method of the instance is called. 
• hidden.bs.modal: It is fired when the modal element is completely hidden after all the CSS transitions are done.
• hidePrevented.bs.modal: It is fired when the modal element is shown, and the user clicks on the backdrop or presses the ESC key on the keyboard.

Syntax:

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('modal_Event', function (event) {
 // do something...
})

Below examples illustrate the Bootstrap 5 Modal Events:

Example 1: In this example, we will listen for the modal events, show.bs.modal, and shown.bs.modal, which gets fired when a modal is toggled visible.

Output:

Example 2: In this example, we will listen for the modal events, hide.bs.modal and hidden.bs.modal, that gets fired when a modal is closed.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/modal/#events