Bind a function to Twitter Bootstrap Modal Close
JqueryModal DialogTwitter BootstrapJquery Problem Overview
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.
Jquery Solutions
Solution 1 - Jquery
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
Solution 2 - Jquery
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:
Solution 3 - Jquery
Starting Bootstrap 3 (edit: still the same in Bootstrap 4) there are 2 instances in which you can fire up events, being:
- When modal "hide" event starts
$('#myModal').on('hide.bs.modal', function () {
console.log('Fired at start of hide event!');
});
2. When modal "hide" event finished
$('#myModal').on('hidden.bs.modal', function () {
console.log('Fired when hide event has finished!');
});
Solution 4 - Jquery
In stead of "live" you need to use "on" event, but assign it to the document object:
Use:
$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
Solution 5 - Jquery
$(document.body).on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal')
});
Solution 6 - Jquery
Bootstrap provide events that you can hook into modal, like if you want to fire a event when the modal has finished being hidden from the user you can use hidden.bs.modal event like this
/* hidden.bs.modal event example */
$('#myModal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
})
Check a working fiddle here read more about modal methods and events here in Documentation
Solution 7 - Jquery
Boootstrap 5+ #ES6+
less dependencies -> Like other frameworks, Bootstrap will go back to standard thanks to new event methods
var myModalEl = document.getElementById('myModalID');
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
});
See this JSFiddle for a working example:
https://jsfiddle.net/Metamagikum/cw5f76bp/3/
The official documentation is located here:
Solution 8 - Jquery
Bootstrap 4:
$('#myModal').on('hidden.bs.modal', function (e) {
// call your method
})
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 (will wait for CSS transitions to complete).
Solution 9 - Jquery
I would do it like this:
$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });
The rest has already been written by others. I also recommend reading the documentation:jquery - on method
Solution 10 - Jquery
I've seen many answers regarding the bootstrap events such as hide.bs.modal
which triggers when the modal closes.
There's a problem with those events: any popups in the modal (popovers, tooltips, etc) will trigger that event.
There is another way to catch the event when a modal closes.
$(document).on('hidden','#modal:not(.in)', function(){} );
Bootstrap uses the in
class when the modal is open.
It is very important to use the hidden
event since the class in
is still defined when the event hide
is triggered.
This solution will not work in IE8 since IE8 does not support the Jquery :not()
selector.
Solution 11 - Jquery
if you want to fire a function on every modal close, you can use this method,
$(document).ready(function (){
$('.modal').each(function (){
$(this).on('hidden.bs.modal', function () {
//fires when evey popup close. Ex. resetModal();
});
});
});
So you don't need to specify modal ids every time.
Solution 12 - Jquery
I was having the same issues as some with
$('#myModal').on('hidden.bs.modal', function () {
// do something… })
You need to place this at the bottom of the page, placing it at the top never fires the event.