当显示模态时,Twitter Bootstrap模态事件未被触发

Question

根据文件:

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

它应该触发方法"show.bs.dropdown"和"shown.bs.dropdown".但它没有:

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

你需要先注册事件然后触发它

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

        alert('shown baby!');

    }).modal('show');

的jsfiddle

Answer 2

当它发生时

当modal也有类"淡入淡出"时,不会触发事件显示 .bs.modal.而show .bs.modal始终有效.请参阅 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');
});

解

对于bootstrap v3.3.6,将line 1010替换为:

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

问题是什么

看看第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)

没有转换(没有淡入淡出类),事件e立即被触发(在那个.$元素上).有了转换,我不确定为什么,但不知何故来自函数emulateTransitionEnd的bsTransationEnd事件不会被处理.$ dialog.one().但有了这个.$元素,一切似乎都有效.