Home » Jquery » Bind a function to Twitter Bootstrap Modal Close

Bind a function to Twitter Bootstrap Modal Close

Posted by: admin November 2, 2017 Leave a comment

Questions:

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.

Answers:

Bootstrap 3

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

See getbootstrap.com/javascript/#modals-events

Bootstrap 2.3.2

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

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

Questions:
Answers:

For Bootstrap v3.0, you just need to bind an event like this:

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

See the Modal Usage section of the docs here:

http://getbootstrap.com/javascript/#modals-usage

See this JsFiddle for a working example:

http://jsfiddle.net/kRLQ4/439/

Questions:
Answers:

Starting Bootstrap 3 (edit: still the same in Bootstrap 4) there are 2 instances in which you can fire up events, being:

1. 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!');
});

Ref: http://getbootstrap.com/javascript/#js-events

Questions:
Answers:
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

Questions:
Answers:

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
});

Questions:
Answers:

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

Questions:
Answers:

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 hideis triggered.

This solution will not work in IE8 since IE8 does not support the Jquery :not() selector.

Questions:
Answers:

I’m jumping in super late here, but for people using Bootstrap modals with React I’ve been using MutationObserver to detect changes in a modal’s visibility and adjusting the state accordingly – this method could be applied to run any function when the modal is closed:

//react stuff
componentDidMount: function() {
    var self = this;
    $(function() {
        $("#example_modal").addClass('modal');
        //use MutationObserver to detect visibility change
        //reset state if closed
        if (MutationObserver) {
        var observer = new MutationObserver(function(mutations) {
            //use jQuery to detect if element is visible
            if (!$('#example_modal').is(':visible')) {
                //reset your state
                self.setState({
                    thingone: '',
                    thingtwo: ''
                });
            }
        });
        var target = document.querySelector('#example_modal');
            observer.observe(target, {
                attributes: true
          });
        }
    });
}

For those wondering about modern browser support, CanIUse has MutationObserver’s coverage at around 87%

Hope that helps someone 🙂

Cheers,

Jake

Questions:
Answers:

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.