1. ホーム
  2. jquery

[解決済み】Twitter Bootstrapでモーダル閉鎖イベントを処理する方法は?

2022-04-09 14:32:32

質問

Twitterのbootstrapで モーダル のドキュメントを参照してください。モーダルのクローズ イベントをリッスンして関数を実行する方法があるかどうか、把握できていませんでした。

例)このモーダルを例にとって説明します。

<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);
});

いかがでしょうか?

解決方法は?

Bootstrap 3 と 4 に対応したアップデート

ブートストラップ3 ブートストラップ4 のドキュメントでは、使用できる2つのイベントを紹介しています。

<ブロッククオート

hide.bs.modal : このイベントは、hideインスタンスメソッドが呼び出されたときに即座に発生します。

隠し.bs.modal : このイベントは、モーダルがユーザーから隠され終わったときに発生します (CSS の遷移が完了するのを待ちます)。

そして、その使い方の例を示してください。

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

レガシーブートストラップ2.3.2アンサー

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

<ブロッククオート

隠す : このイベントは、hideインスタンスメソッドが呼び出されたときに即座に発生します。

隠す : このイベントは、モーダルがユーザーから隠され終わったときに発生します (css の遷移が完了するのを待ちます)。

そして、その使い方の例を提供します。

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