How to handle the modal closing event in Twitter Bootstrap?

Modal Closing Event in Twitter Bootstrap | Set 1

Prerequisite Knowledge: Bootstrap 4 | Modal

Twitter Bootstrap’s modal class offer a few events that are fired at the standard Bootstrap modal class. Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that is customizable and responsive. They can be used to display alert popups, videos, and images in a website. Bootstrap Modals are divided into three primary sections: header, body, and footer.

The Bootstrap Events are: show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal etc. Out of all these events, we are interested in the hide.bs.modal and hidden.bs.modal events.

• hide.bs.modal: This event is fired immediately when the hide instance method has been called.
• hidden.bs.modal: This event is fired when the modal has finished being hidden from the user and will then wait for CSS transitions to complete.

Example:

Output:

Before Clicking the Button:

👁 Image

After Clicking the Button:

👁 Image

On closing modal, observe the console:

👁 Image

So when modal is closed, we successfully handle it using

• Fire an output in the console
• Alert the user