Twitter Bootstrap Modal Event Not Fired When Modal is Shown

Question

According to the docs:

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

It should fire the methods "show.bs.dropdown" and "shown.bs.dropdown". But it doesn't:

http://jsfiddle.net/mQunq/3/

HTML:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">Hello world</div>
    </div>
</div>

jQuery:

// show.bs.modal doesn't work either

$('#myModal')
    .modal('show')
    .on('show.bs.modal', function() {

        alert('shown baby!');

    });

Answer 1

Youe need first register event then trigger it

$('#myModal')
    .on('show.bs.modal', function() {

        alert('shown baby!');

    }).modal('show');

jsfiddle

Answer 2

When it happens

Event .bs.modal is not fired when modal has also class "fade". .bs.modal。 Whereas .bs.modal always works. .bs.modal始终有效。 See https://github.com/twbs/bootstrap/issues/11793

HTML:

<div class="modal fade" id="first" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">Hello world from first modal</div>
    </div>
</div>
<div class="modal" id="second" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">Hello world from second modal</div>
    </div>
</div>

jQuery:

$('.modal').on('shown.bs.modal', function() {
    //fired only in second modal
    console.info('shown.bs.modal');
});

$('.modal').on('show.bs.modal', function() {
    //fired always
    console.info('show.bs.modal');
});

Solution

For bootstrap v3.3.6 replace line 1010 with:

that.$element // wait for modal to slide in

What is the problem

Look at lines 1006-1015:

  var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

  transition ?
    that.$dialog // wait for modal to slide in
      .one('bsTransitionEnd', function () {
        that.$element.trigger('focus').trigger(e)
      })
      .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
    that.$element.trigger('focus').trigger(e)

Without transition (no fade class) the event e is triggered right away (on that.$element). With transition, I'm not sure why exactly, but somehow the bsTransationEnd event from function emulateTransitionEnd is not handled by that.$dialog.one() . But with that.$element , everything seem to work.

Answer 3

Similar thing happened to me and I have solved using setTimeout.

Bootstrap is using the following timeout to complete showing:

c.TRANSITION_DURATION=300,c.BACKDROP_TRANSITION_DURATION=150,

So using more than 300 must work and for me 200 is working:

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

Answer 4

you forgot the "n" on shown

$(document).ready(function(){
    $('#myModal')
.modal('show')
.on('shown.bs.modal', function() {

    alert('shown baby!');

});

});

Answer 5

Use document instead of your custom selector. Both shown.bs.modal and show.bs.modal work just fine

$(document).on('shown.bs.modal', '.modal', function() {
    alert();
});

Answer 6

In case someone stumbles upon this problem, make sure you hook the on hidden / shown event before firing the toggle of the modal. That is, declare this:

$("#selector").on("hidden.bs.modal", function () {
    // do the right thing
});     

Before calling the toggle of the modal, eg:

("#selector").modal("toggle");

I know this is basic, but in a convoluted code it happens.

Answer 7

I found a solution that works with .fade transitions:

$(document).on($.support.transition.end, '.modal.fade.in', function(e) {
  var $target = $(e.target);
  if ($(e.target).is(".modal-dialog")) {
    console.log("Modal Shown")
  }
});

$(document).on($.support.transition.end, '.modal.fade', function(e) {
  var $target = $(e.target);
  if (!$target.is(".modal.fade.in") && !$target.is(".modal-dialog")) {
    console.log("Modal Hidden")
  }
});

Answer 8

If your modal is dynamically created, select the closest static parent element and add your modal as a parameter for bootstrap modal events to work:

/* body is static, .modal is not */

$("body").on('shown.bs.modal', '.modal', function() {

    alert('shown');

});


$("body").on('hidden.bs.modal', '.modal', function() {

    alert('hidden');

});


$("body").on('show.bs.modal', '.modal', function() {

    alert('show');

});


$("body").on('hide.bs.modal', '.modal', function() {

    alert('hide');

});