Call back function in modal of bootstrap3

Question

Im a little bit confuse about firing a call back function in javascript modal of bootstrap3. In normal jquery.post you can do it like,

$.post(\         


        

Answer 1

I think better will be, to use "shown.bs.modal" it is fiered when modal is allready loaded. Bootstrap modal events

$('#myModal').on('shown.bs.modal', function (e) {
    alert('modal is allready shown');
});

Answer 2

Wrap it with

$(window).on('load', function() {
    ...modal callback here.
});

Answer 3

Just a little to add for the 1st answer, it is because when the callback is triggered the DOM inside the modal is not completely loaded yet, perhaps should do a little hack here to holdback the action after callback for a while. Hope it helps!

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        // something here
    }, 300);
});

Answer 4

For Bootstrap 3, the events are now namespaced, so the show event for the modal would be show.bs.modal...

$('#myModal').on('show.bs.modal', function (e) {
    alert('modal show');
});

Demo: http://bootply.com/90952

Answer 5

@Skelly is right, you can use the show.bs.modal event like this:

$('#myModal').on('show.bs.modal', function (e) {
    alert('modal show');
});

The official documentation says:

This event fires immediately when the show instance method is called.

Please note that this event is fired "quite soon" and you may need to use shown.bs.modal instead.

Documentation about this event:

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).

This impacts @Keith yeoh's answer and you should avoid timeouts when possible.

Source: Official Bootstrap documentation