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

Bootstrapのモーダルウインドウの基本設定の他に、今回はCSSやJavasscriptを用いて、モーダルウインドウをカスタマイズしてみます。全ての設定を１つのサンプルコードに設定しています。

モーダルウインドウをカスタマイズした内容

以下を1設定で行っています。

１：画面がロードされたら、自動でモーダルウインドウを表示

２：背景を変更（モーダルウインドウではない）

３：モーダルウインドウの背景、コンテンツの色を変更

４：モーダルウインドウが表示されるまでの時間を変更

モーダルウインドウをカスタマイズしたサンプルコード

下記コードをメモ帳などに貼り付け、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 () {
//     画面読み込み１秒後にモーダル表示
            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">&times;</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で画面を読み込んで１秒後にモーダルウインドウを表示する設定を行っています。

1000の部分を変更すれば、モーダルウインドウが表示されるまでの時間を上下する事が可能です

    <script>
        $(window).load(function () {
//     画面読み込み１秒後にモーダル表示
            setTimeout(function () {
                $('#modal-sample').modal('show');
            }, 1000);
        });
    </script>

モーダルウインドウのコンテンツ外の背景

CSSの .modal-backdrop 部分で下記画像の緑の部分を設定しています。opacityは透過度の値で１〜０の範囲で設定できます。少なければ透過され、多ければ濃くなります。

modal-Customize

        /*モーダルの背景の色※モーダル自体の背景ではない*/
        .modal-backdrop {
            background-color: green;
        &.in {
            /*透過度*/
        @include opacity(0.7);
        }

モーダルウインドウのコンテンツの背景

モーダルウインドウ自体の色を変更する場合は、.modal-content や.modal-bodyのCSSへ背景を設定すれば変更可能です。

このCSSを設定すると下記画像の黄色の部分が設定されます。

modal-Customize

        /*モーダル全体の背景設定*/
        .modal-content {
            background: yellow;
        }

        /*モーダルのbody要素の背景設定*/
        .modal-body {
            background: white;
        }

モーダルウインドウが表示されるまでの速度を変更する

下記を設定すれば、モーダルが表示されるまでの時間を設定できます。値が増加されればより遅く表示されます。

        /*モーダルが表示される速度を変更する*/

        .modal.fade {
            transition-duration: 2s;
        }

以上になります。

LocalStorageとBootstrapのモーダルを利用する

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き

Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き

Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

Bootstrapでテーブル表記を行う|コピペで動くサンプル付き

CSSだけでOK！ヘッダーとサイドバーを固定する|サンプルコード付きを御覧ください

あなたにお勧めの記事

2018/05/19

AWS(Linux)のEBSへSwap領域を追加する

2018/05/24

Nginxでgzip圧縮を設定する