How to Bind a Function to Bootstrap Modal Close Event

Bootstrap Modal provides an easy way to display a dialog box or popup window on the web page. The .modal() method is used to attach the modal window to link or button using Bootstrap. Sometimes Bootstrap modal functionality need to be customized based on your web application needs. The bootstrap’s modal class allows you to hook into the modal functionality using some predefined events.

The Bootstrap’s modal events are very useful to change the behavior of the modal functionality. In the example code snippet, we will show you how to bind a function to the modal close event in Bootstrap. If you want to perform some functionality when the user closes the modal popup, you need to bind the respective function or code to Bootstrap modal close event.

Use the hide.bs.modal event to attach a function to the modal close event in Bootstrap using jQuery.

$('#myModal').on('hidden.bs.modal', function () {
  // do something...
})

The following code snippet shows an example to refresh or reload the page on Bootstrap modal close using jQuery and JavaScript.

$('#myModal').on('hidden.bs.modal', function () {
  // refresh current page
  location.reload();
})