web-dev-qa-db-ja.com

Twitter Bootstrapでモーダルクロージングイベントを処理する方法

Twitterのブートストラップで、 modals のドキュメントを見てください。モーダルの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>

data-dismiss="modal"のため、上のXボタンと下の閉じるボタンの両方でモーダルを隠したり閉じたりできます。それで、どういうわけかそれに耳を傾けることができたらどうだろうか？

代わりに、私はこのように手動でそれを行うことができます、私は思います...

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

どう思いますか？

jquerytwitter-bootstrapmodal-dialog
163
Houman

ブートストラップ3および4用に更新

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

hide.bs.modal：このイベントは、hideインスタンスメソッドが呼び出された直後に発生します。
hidden.bs.modal：このイベントは、モーダルがユーザーから隠され終わったときに発生します（CSSの遷移が完了するのを待ちます）。

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

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

レガシーブートストラップ2.3.2回答

ブートストラップのドキュメント はあなたが使うことができる二つのイベントを参照しています。

hide：このイベントは、hideインスタンスメソッドが呼び出された直後に発生します。
hidden：このイベントはモーダルがユーザーから隠されたときに発生します（CSSの遷移が完了するのを待ちます）。

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

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

あなたのモーダルdivが動的に追加されているなら、（ブートストラップ3のために）を使ってください

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

これは動的でないコンテンツにも有効です。

60
Confused

モーダルイベントには2つのペアがあります。1つは「表示」と「表示」、もう1つは「非表示」と「非表示」です。名前からわかるように、hideイベントは、右上隅にある×印をクリックする、閉じるボタンをクリックするなど、モーダルが閉じる直前になると発生します。隠されている間は、モーダルが実際に近い後に発生します。あなたはこれらの出来事をあなた自身でテストすることができます。例：

$( '#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' )
   });

そして、あなたの質問に関しては、私はあなたがあなたのモーダルの 'hide'イベントに耳を傾けるべきだと思います。

17
leo

ブートストラップモーダルイベント：

  1. hide.bs.modal =>モーダルが隠されようとしているときに発生します。
  2. hidden.bs.modal =>モーダルが完全に非表示になったときに発生します（CSSトランジションの完了後）。
<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

これが役立つことを願っています。

0
vishpatel73