Modified Bootstrap event does not fire when modal is displayed

Question

According to the docs:

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

It should run the show.bs.dropdown and show.bs.dropdown methods. But this is not so:

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

You need to register the event first and then fire it

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

jsfiddle

Answer 2

When will this happen

The event shown by .bs.modal does not fire when the modal also has a class of "fade". While show .bs.modal always works. 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'); }); 

Decision

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 a transition (class fade ), the e event is fired immediately (on this element $.). With the transition, I'm not sure why, but somehow the bsTransationEnd event from the emulateTransitionEnd function is not handled by this. $ Dialog.one () i>. But with that. $ Element everything works.

Answer 3

A similar situation happened to me, and I decided to use setTimeout.

Bootstrap uses the following timeout to complete the show:

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

So using over 300 should work, and 200 works for me:

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

Answer 4

you forgot the "n" in the shown

 $(document).ready(function(){ $('#myModal') .modal('show') .on('shown.bs.modal', function() { alert('shown baby!'); }); }); 

Answer 5

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

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

Answer 6

If someone stumbled upon this problem, make sure you hook the hidden / shown event up to trigger the toggle modal. That is, declare this:

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

Before calling the modal switch, for example:

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

I know this is basic, but in convoluted code this 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") } });