Header
2018-03-08
2019-10-08

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

21232121

今回はBootstrapでModal(モーダルウインドウ)を設定する方法を解説します。

BootstrapでModalを利用するには、CDNを読み込んで、モーダルのクラスを読み込めばそれだけで設定が完了します。

実際にコピペで動くサンプルコードを記載しているので、ぜひご利用ください。

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

■関連記事■

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

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

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

CSSだけでOK!ヘッダーとサイドバーを固定する|サンプルコード付き

モーダルとは

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

モーダルウインドウ

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

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

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

などです

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

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

エディタを用意しなくても、オンラインで確認できるサービスがあるのでこちらのhtmlの欄にソースを貼り付け 左上のrunを押せば右下に表示され動作確認が可能です。

※run後表示まで5秒くらいかかります

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

Bootstrap4(最新バージョン)のサンプルコード

<!doctype html>
<html lang="ja">
<head>
  <title>Bootstrap4モーダルサンプル</title>
  <!-- 必要なメタタグ -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<h1>モーダルサンプル</h1>
<!-- 切り替えボタンの設定 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">
  押すと表示されます。
</button>

<!-- モーダルの設定 -->

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
  <!--以下modal-dialogのCSSの部分で modal-lgやmodal-smを追加するとモーダルのサイズを変更することができる-->
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="Modal">モーダルのタイトルが表示されます</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        モーダルのコンテンツを表示します。このモーダルはサイズを大きくしています。
        またレシポンシブデザインに対応しているので画面を小さくすると、モーダルも自動で縮小されます
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap3のサンプルコード

<!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>
</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> type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

サンプルコード解説

以下はBootstrap4 3ともに同様です。

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

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

モーダルウインドウを大きくする場合はmodal-dialogが設定されているクラスにmodal-lgを設定すればモーダル全体を大きく設定できます

以下でモーダル全体を大きく設定できます

<div class="modal-dialog modal-lg">

小さくする場合

 <div class="modal-dialog modal-sm">

こちらもmodal-smのクラスを追加すると可能です

詳細な説明はサンプルコード上のコメントに記載しているので、そちらをご確認ください。

初心者・独学者の方はサンプルコードを削除したり並び替えたりして、実際の動作がどのコードに影響しているかをご確認ください

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

有料になりますが、オンラインプログラミングサービスUdemyでも豊富にBootstrapの初心者向けコースがあります。

詳細はこちらから御覧ください

その他Bootstrap jqueryの記事

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

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

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

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

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

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

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

前の記事
次の記事
人気記事
カテゴリーから記事を探す