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() { // モーダルウィンドウを閉じようとしたときの処理 });