背景色
このページでは「.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でモーダルのイベント関連