bootstrapでモーダルのイベント関連
作成日:2017-11-20, 更新日:2018-01-04
show.bs.modal | モーダルウィンドウを開こうとしたとき |
---|---|
shown.bs.modal | モーダルウィンドウが開いたとき |
hide.bs.modal | モーダルウィンドウを閉じようとしたとき |
hidden.bs.modal | モーダルウィンドウが閉じたとき |
▼イベントの処理の基本
$(〇〇〇).on(各イベント, '〇〇〇', function(){});
サンプル
- HTML部
-
<div class="modal fade" id="sampleModal" tabindex="-1"> <div class="modal-dialog"> ~ 省略 ~ </div> </div>
- Javascript部
-
$(〇〇〇).on('show.bs.modal', '#sampleModal', function() { // モーダルウィンドウを開こうとしたときの処理 }); $(〇〇〇).on('hide.bs.modal', '#sampleModal', function() { // モーダルウィンドウを閉じようとしたときの処理 });