Prerequisite Knowledge: Bootstrap 4 | Modal
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.
Before Clicking the Button:
After Clicking the Button:
On closing modal, observe the console:
So when modal is closed, we successfully handle it using
- Fire an output in the console
- Alert the user
- How to use modal closing event in Twitter Bootstrap ?
- Bootstrap 4 | Modal
- How to Check Twitter Bootstrap is Loaded or not ?
- What does .modal('dispose') do in Bootstrap 4 ?
- How to Automatically Close Alerts using Twitter Bootstrap ?
- Data-toggle attributes in Twitter Bootstrap
- How to get the same behavior with confirm and bootstrap modal?
- How to configure modal width in Bootstrap?
- How to change the width and height of Twitter Bootstrap's tooltips?
- How to use complex HTML with twitter Bootstrap tooltip using jQuery ?
- How to hide element on small devices in Twitter Bootstrap ?
- How to change the position of modal close button in bootstrap?
- How to use Bootstrap modal for YouTube videos and play automatically ?
- How to open or close react-bootstrap modal pro-grammatically?
- How to add active class on click event in custom list group in Bootstrap 4 ?
- How to refresh parent page on closing a popup ?
- How to use a div as content for Twitter's Popover?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.