Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付き

Bootstrapのモーダルウインドウの基本設定の他に 、今回はCSSやJavasscriptを用いて、モーダルウインドウをカスタマイズしてみます。 全ての設定を1つのサンプルコードに設定しています。
モーダルウインドウをカスタマイズした内容
以下を1設定で行っています。
1:画面がロードされたら、自動でモーダルウインドウを表示
2:背景を変更(モーダルウインドウではない)
3:モーダルウインドウの背景、コンテンツの色を変更
4:モーダルウインドウが表示されるまでの時間を変更
モーダルウインドウをカスタマイズしたサンプルコード
下記コードをメモ帳などに貼り付け、html形式で保存し展開すれば動作を確認できます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>モーダルカスタマイズ例</title> <!--CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <!--JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script> $(window).load(function () { // 画面読み込み1秒後にモーダル表示 setTimeout(function () { $('#modal-sample').modal('show'); }, 1000); }); </script> <style> /*モーダルの背景の色※モーダル自体の背景ではない*/ .modal-backdrop { background-color: green; &.in { /*透過度*/ @include opacity(0.7); } } /*モーダル全体の背景設定*/ .modal-content { background: yellow; } /*モーダルのbody要素の背景設定*/ .modal-body { background: white; } /*モーダルが表示される速度を変更する*/ .modal.fade { transition-duration: 2s; } </style> </head> <body> <!-- 1.モーダルを表示する為のボタン --> <button class="btn btn-primary" data-toggle="modal" data-target="#modal-sample"> モーダルを表示 </button> <!-- 2.モーダルの配置 --> <div class="modal fade" id="modal-sample" tabindex="-1"> <div class="modal-dialog"> <!-- 3.モーダルのコンテンツ --> <div class="modal-content"> <!-- 4.モーダルのヘッダ --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="modal-label">モーダルのタイトルを表示する</h4> </div> <!-- 5.モーダルのボディ --> <div class="modal-body"> コンテンツの本文 </div> <!-- 6.モーダルのフッタ --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> </body> </html>
コード解説
画面が読み込まれたら、モーダルウインドウを表示
この設定はJavascriptで設定しています。 今回の設定ではJavascriptで画面を読み込んで1秒後にモーダルウインドウを表示する設定を行っています。
1000の部分を変更すれば、モーダルウインドウが表示されるまでの時間を上下する事が可能です
<script> $(window).load(function () { // 画面読み込み1秒後にモーダル表示 setTimeout(function () { $('#modal-sample').modal('show'); }, 1000); }); </script>
モーダルウインドウのコンテンツ外の背景
CSSの .modal-backdrop 部分で下記画像の緑の部分を設定しています。opacityは透過度の値で1〜0の範囲で設定できます。 少なければ透過され、多ければ濃くなります。
/*モーダルの背景の色※モーダル自体の背景ではない*/
.modal-backdrop {
background-color: green;
&.in {
/*透過度*/
@include opacity(0.7);
}
モーダルウインドウのコンテンツの背景
モーダルウインドウ自体の色を変更する場合は、.modal-content や.modal-bodyのCSSへ背景を設定すれば変更可能です。
このCSSを設定すると下記画像の黄色の部分が設定されます。
/*モーダル全体の背景設定*/ .modal-content { background: yellow; } /*モーダルのbody要素の背景設定*/ .modal-body { background: white; }
モーダルウインドウが表示されるまでの速度を変更する
下記を設定すれば、モーダルが表示されるまでの時間を設定できます。値が増加されればより遅く表示されます。
/*モーダルが表示される速度を変更する*/ .modal.fade { transition-duration: 2s; }
以上になります。
その他の関連記事
サイトへ簡単にアイコンを無料設定できる|Font Awesomeの使い方|サンプルコード付き
LocalStorageとBootstrapのモーダルを利用する
Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き
Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き
Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き
Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き
Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き
htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き