13

ドキュメントによると：

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

    });
4

8 に答える 8

32

最初にイベントを登録してからトリガーする必要があります

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

        alert('shown baby!');

    }).modal('show');

jsfiddle

于 2013-10-29T15:54:25.323 に答える
11

それが起こるとき

modal にクラス "fade" がある場合、.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');
});


解決

ブートストラップ v3.3.6 の場合、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がすぐにトリガーされます (that.$element で)。トランジションでは、正確な理由はわかりませんが、どういうわけか関数emulateTransitionEndからのbsTransationEndイベントがthat.$dialog.one()によって処理されません。しかし、that.$elementでは、すべてが機能しているようです。

于 2016-06-03T09:13:52.857 に答える
3

同様のことが私にも起こり、setTimeout を使用して解決しました。

ブートストラップは、表示を完了するために次のタイムアウトを使用しています。

c.TRANSITION_DURATION=300、c.BACKDROP_TRANSITION_DURATION=150、

したがって、300 以上を使用する必要があり、私にとっては 200 が機能しています。

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Do something if necessary
    }, 300);                        
})
于 2014-11-06T16:12:55.863 に答える
1

表示の「n」を忘れた

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

    alert('shown baby!');

});

});
于 2013-10-29T15:55:50.030 に答える