Bootstrapのモーダルのサンプル

基本的なモーダルの記述とモーダルの開閉イベント発生時の処理サンプル

背景色

このページでは「.modal-backdrop{#fff;}」を追加して白の半透明にしています。
デフォルトは「.modal-backdrop{#000;}」で黒の半透明指定になっています。

サンプル

モーダルの開閉イベント発生は4種類。
・モーダルを開こうとしたとき。
・モーダルが開いたとき。
・モーダルを閉じようとしたとき。
・モーダルが閉じたとき。
このサンプルでは、それぞれのイベント発生時にアラートを出すようにしている。

ソース

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demoModal">modalを開く</button>

<!-- Modal -->
<div class="modal fade" id="demoModal" tabindex="-1" role="dialog"><div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">タイトル</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    
    <div class="modal-body">
      モーダルテストです。
    </div>
    
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
    </div>
  </div>
</div></div>

<script>
  $('#demoModal').on('show.bs.modal', function (e) {
    alert("イベント発生: show.bs.modal モーダルを開こうとした");
  });
  $('#demoModal').on('shown.bs.modal', function (e) {
      alert("イベント発生: shown.bs.modal モーダルが開いた");
  });
  $('#demoModal').on('hide.bs.modal', function (e) {
      alert("イベント発生: hide.bs.modal モーダルを閉じようとした");
  });
  $('#demoModal').on('hidden.bs.modal', function (e) {
      alert("イベント発生: hidden.bs.modal モーダルが閉じた");
  });
</script>

色々

関連項目

bootstrapでモーダルウィンドウ
bootstrapでモーダルのイベント関連