Bind a function to Twitter Bootstrap Modal Close

Question

I am using the Twitter Bootstrap lib on a new project and I want for part of the page to refresh and retrieve the latest json data on modal close. I dont see this anywhere in the documentation can someone point it out to me or suggest a solution.

Two problems with using the documented methods

 $('#my-modal').bind('hide', function () {    // do something ...  }); 

I attach a "hide" class to the modal already so it does not display on page load so that would load twice

even if I remove the hide class and set the element id to display:none and add console.log("THE MODAL CLOSED"); to the function above when I hit close nothing happens.

Answer 1

Bootstrap 3 & 4

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

Bootstrap 3: getbootstrap.com/javascript/#modals-events

Bootstrap 4: getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

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

See getbootstrap.com/2.3.2/javascript.html#modals → Events

Answer 2

Bootstrap 4

$('#my-modal').on('hidden.bs.modal', function () {   window.alert('hidden event fired!'); }); 

See this JSFiddle for a working example:

https://jsfiddle.net/6n7bg2c9/

See the Modal Events section of the docs here:

https://getbootstrap.com/docs/4.3/components/modal/#events