ラボ > Javascript関連:Bootstrap、イベント関連、Bootstrap:モーダル

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

モーダルウィンドウの開閉

参照:bootstrapでモーダルウィンドウ

関連項目

bootstrapでモーダルウィンドウ

サンプル

Bootstrapのモーダルのサンプル