216

Twitterのブートストラップで、モーダルのドキュメントを見てください。モーダルの close イベントをリッスンして関数を実行する方法があるかどうかはわかりませんでした。

たとえば、このモーダルを例に取りましょう:

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

上部の X ボタンと下部の閉じるボタンの両方で、モーダルを非表示/閉じることができますdata-dismiss="modal"。それで、どうにかしてそれを聞くことができたのだろうか？

あるいは、このように手動で行うこともできます...

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

どう思いますか？

4

5 に答える 5

427

Bootstrap 3 および 4 用に更新

Bootstrap 3とBootstrap 4のドキュメントは、使用できる 2 つのイベントを参照しています。

hide.bs.modal : このイベントは、hide インスタンス メソッドが呼び出されるとすぐに発生します。
hidden.bs.modal : このイベントは、モーダルがユーザーから非表示になったときに発生します (CSS トランジションが完了するのを待ちます)。

そして、それらの使用方法の例を提供します:

$('#myModal').on('hidden.bs.modal', function () {
  // do something…
})

レガシー Bootstrap 2.3.2 の回答

Bootstrap のドキュメントでは、使用できる 2 つのイベントについて言及しています。

hide : このイベントは、hide インスタンス メソッドが呼び出されるとすぐに発生します。
hidden : このイベントは、モーダルがユーザーから非表示にされたときに発生します (css トランジションが完了するのを待ちます)。

また、それらの使用方法の例を示します。

$('#myModal').on('hidden', function () {
    // do something…
})
于 2012-09-07T14:04:27.433 に答える
83

モーダル div が動的に追加される場合は、(ブートストラップ 3 および 4 の場合) を使用します。

$(document).on('hide.bs.modal','#modal-id', function () {
                alert('');
 //Do stuff here
});

これは、非動的コンテンツでも機能します。

于 2014-11-06T12:55:16.100 に答える
20

モーダル イベントには 2 つのペアがあり、1 つは「表示」と「表示」、もう 1 つは「非表示」と「非表示」です。名前からわかるように、hide イベントは、モーダルが閉じようとしているときに発生します。たとえば、右上隅の十字をクリックしたり、閉じるボタンをクリックしたりします。モーダルが実際に閉じられた後にhiddenが発生します。これらのイベントは自分でテストできます。例:

$( '#modal' )
   .on('hide', function() {
       console.log('hide');
   })
   .on('hidden', function(){
       console.log('hidden');
   })
   .on('show', function() {
       console.log('show');
   })
   .on('shown', function(){
      console.log('shown' )
   });

そして、あなたの質問については、モーダルの「非表示」イベントを聞くべきだと思います。

于 2013-04-26T09:08:16.890 に答える