[解決済み】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">×</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…
})
関連
-
[解決済み] チェックボックスのオン/オフの切り替え
-
[解決済み] セレクタの子を取得する方法は?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Bootstrapのモーダルが背景の下に表示される
-
[解決済み] ブートストラップ・モーダルにデータを渡す
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] Twitter Bootstrapのモーダルウィンドウを閉じないようにする
-
[解決済み] Bootstrapのモーダルを閉じる
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】jQuery: outer html() [重複]。
-
[解決済み】Bootstrap - Uncaught TypeError: 未定義のプロパティ 'fn' を読み取れない。
-
[解決済み】カルーセルで画像を中央に配置する方法
-
[解決済み] jqueryで日付を比較する
-
[解決済み] How to make the first option of <select> selected with jQuery
-
[解決済み] ユーザーがDIVの外側をクリックしたときに、jQueryを使用してDIVを非表示にする
-
[解決済み] jQuery バリデーション - エラーの配置
-
[解決済み] jqueryでアンカークリックをシミュレートするにはどうしたらいいですか?
-
[解決済み] jQuery resizableを画像と結合する方法は?
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする