2 flat logo on transparent 256
2018-03-08

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

21232121

今回はBootstrapでModal(モーダルウインドウ)を設定する方法を解説します。実際にコピペで動くコードをサンプルとして記載しています。

利用シーンといては注意点を表示したり数秒間コンテンツを見たらキャンペーンフォームを表示させるなどで利用できます。

■関連記事■

jQueryでナビゲーションを途中で固定し追随させる|コピペで動くサンプル付き

jQueryと正規表現でフォームのバリデーションを設定する|コピペで動くサンプル付き

CSS3でhoverした時に背景をふわっと変更する|コピペで動くサンプル付き

モーダルとは

ボタンを押すと下記画像の用に、コンテンツが前面に表示されるウインドウの事を指します。

モーダルウインドウ

モーダルウインドウ利用シーン

指定した時間を経過するとモーダルでサービス申し込みページのアナウンスを表示する

ログイン、ログアウトの際にモーダルでアナウンスを表示する

などです

モーダルウインドウのサンプルコード

下記コードをメモ帳などに貼り付け、html形式で保存し展開すれば動作を確認できます。

Bootstrapをカスタマイズする場合は Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付きの記事を御覧ください

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>

</style>

</style>
</head>

<body>
<!-- 1.モーダルを表示する為のボタン -->
<button class="btn btn-primary" data-toggle="modal" data-target="#modal-sample">
    モーダルを表示
</button>

<!-- 2.モーダルの配置 -->
<div class="modal" 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>

モーダルの大きさを変更する

クラスを追加してモーダルウインドウ全体を大きくしたり小さくしたりする事が可能です。

モーダルウインドウを大きくする場合

<!-- 2.モーダルの配置 -->
<div class="modal" id="modal-sample" tabindex="-1">
    <div class="modal-dialog modal-lg">

上記三行目にmodal-lgのクラスを追加します。

小さくする場合

<!-- 2.モーダルの配置 -->
<div class="modal" id="modal-sample" tabindex="-1">
    <div class="modal-dialog modal-sm">

こちらも上記三行目にmodal-smのクラスを追加すると可能です

コード解説

data-target="#modal-sample"の部分がボタンとコンテンツの紐付けを行っています

モーダルのhtmlの構成は

<div class="modal" id="modal-sample" tabindex="-1">
<div class="modal-content">

で全体の要素を囲み その配下でヘッダー、ボディ、フッターの要素を設定します

なおモーダルウインドウの右上の×ボタンは 下記のボタン要素になります。

 <button type="button" class="close" data-dismiss="modal">
   <span aria-hidden="true">&times;</span>
  </button>

以上

詳細な説明はサンプルコードのコメントに記載しているので、そちらをご確認ください。 初心者・独学者の方はサンプルコードを削除したり並び替えたりして、実際の動作がどのコードに影響しているかをご確認ください

またBootstrapをカスタマイズする場合は Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付きの記事を御覧ください

その他Bootstrap jqueryの記事

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

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

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

jQueryでナビゲーションを途中で固定し追随させる|コピペで動くサンプル付き

jQueryでひらがなをカナに自動変換し、バリデーションを設定する

Ruby On Railsでフロントエンドを操作するなら

Ruby On RailsでSassを活用し、CSS作成を高速・効率化する

前の記事
次の記事