2 flat logo on transparent 256
2018-02-08

Bootstrapでモーダルウインドウを表示する

21232121

今回は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>

コード解説

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>
前の記事
次の記事