Bootstrapでモーダル(Modal)を作る方法

Bootstrapでモーダル(Modal)を作る方法

デモ

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Bootstrap Modal demo</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div><h4>サンプル1</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
          サンプル1
        </button>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">モーダルタイトル</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                サンプル1
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary">変更の保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル2</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
          サンプル2(モーダルロック)
        </button>
        <!-- Modal -->
        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">モーダルタイトル</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                サンプル2<br />ダイアログの外側をクリックしてもダイアログは閉じない
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary">保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル3</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalScrollable">
          サンプル3(スクロールあり)
        </button>
        <!-- Modal -->
        <div class="modal fade" id="modalScrollable"  tabindex="-1" aria-labelledby="modalScrollableLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="modalScrollableLabel">モーダルタイトル</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                サンプル3<br /><div style="height:1000px;"></div>スクロールあり
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary">保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル4</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalVerticallyCentered">
          サンプル4(中央表示)
        </button>
        <!-- Modal -->
        <div class="modal fade" id="modalVerticallyCentered"  tabindex="-1" aria-labelledby="modalVerticallyCenteredLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="modalVerticallyCenteredLabel">モーダルタイトル</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                サンプル4<br />中央表示
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary">保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル5</h4></div>
      <div>
        <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle1" role="button">サンプル5(複数モーダル切り替え)</a>
        <div class="modal fade" id="exampleModalToggle1" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel">モーダル1</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                複数モーダル切り替え<br />モーダル1
              </div>
              <div class="modal-footer">
                <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">モーダル2へ</button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel2">モーダル2</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                複数モーダル切り替え<br />モーダル2
              </div>
              <div class="modal-footer">
                <button class="btn btn-primary" data-bs-target="#exampleModalToggle1" data-bs-toggle="modal" data-bs-dismiss="modal">モーダル1へ</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル6</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal6Sm">
          サンプル6(.modal-sm)
        </button>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal6Lg">
          サンプル6(.modal-lg)
        </button>
        
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal6Xl">
          サンプル6(.modal-xl)
        </button>
        
        <!-- Modal Small-->
        <div class="modal fade" id="exampleModal6Sm" tabindex="-1" aria-labelledby="exampleModal6SmLabel" aria-hidden="true">
          <div class="modal-dialog modal-sm">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModal6SmLabel">モーダルタイトル</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                サンプル6<br />小(スモール)
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary">変更の保存</button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Large -->
        <div class="modal fade" id="exampleModal6Lg" tabindex="-1" aria-labelledby="exampleModal6LgLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModal6LgLabel">モーダルタイトル</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                サンプル6<br />大(ラージ)
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary">変更の保存</button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Extra Large -->
        <div class="modal fade" id="exampleModal6Xl" tabindex="-1" aria-labelledby="exampleModal6XlLabel" aria-hidden="true">
          <div class="modal-dialog modal-xl">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModal6XlLabel">モーダルタイトル</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                サンプル6<br />極大(エクストララージ)
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary">変更の保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル7</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFull">
          サンプル7(フルスクリーン)
        </button>
        <!-- Modal -->
        <div class="modal fade" id="exampleModalFull" tabindex="-1" aria-labelledby="exampleModalFullLabel" aria-hidden="true">
          <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalFullLabel">モーダルタイトル</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                サンプル7<br />フルスクリーン
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary">変更の保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル8</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" onclick="showModal();">
          サンプル8(Javascript起動)
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModalJs" tabindex="-1" aria-labelledby="exampleModalJsLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalJsLabel">モーダルタイトル</h5>
              </div>
              <div class="modal-body">
                サンプル8<br />Javascript起動
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="hideModal();">閉じる</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script type="text/javascript">
        var options = {backdrop:false,keyboard:false,focus:false};
        var myModal = new bootstrap.Modal(document.getElementById('exampleModalJs'), options)
        function showModal() {
          myModal.show();
        }
        function hideModal() {
          myModal.hide();
        }
      </script>
    </div><!-- row -->
  </div><!-- container -->
</body>
</html>

実装方法

Bootstrap導入

まず、BootstrapのCSSファイルとJSファイルを読み込みます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

導入方法の詳細は、以下のページをご覧ください。

モーダル実装

モーダル領域オブジェクト生成
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  ...
</div>

まず、モーダル領域を生成します。

DIV領域にclassに「modal」を指定してください。

また、「fade」を指定すると、エフェクト(効果)付きでのモーダル表示になります。

そして、必ず、idも設定してください。

ダイアログ領域オブジェクト生成

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    ...
  </div>
</div>

次にモーダル領域の中にDIV領域を生成しclassに「modal-dialog」を設定してください。

トリガーオブジェクト生成

最後に呼び出しオブジェクトを作ります。

リンクの場合
<a data-bs-toggle="modal" href="#exampleModal" role="button">
  リンク
</a>

リンクの場合は、aタグの属性に「href」を設定し値に、モーダル領域のIDをシャープ(#)を付けて、設定してください。

リンク以外の場合
<button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal">
  ボタン
</button>

リンク以外の場合は属性「data-bs-target」を設定し、値にモーダル領域のIDをシャープ(#)を付けて、設定してください。

閉じるボタン実装

閉じるボタンを設置するには、ボタンやリンクなどを設置し、そのオブジェクトに属性「data-bs-dismiss」、その値に『modal』を設定してください。

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<button type="button" data-bs-dismiss="modal">閉じる</button>

背景をクリックしてもモーダルを閉じないダイアログにするには?

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

オプションの「backdrop」で『static』(背景が暗いまま)か、『false』(背景が明るいまま)を設定すれば、モーダルダイアログ表示時、背景をクリックしても閉じないモーダルロックのダイアログが表示されます。

また、「Esc」キー(エスケープキー)を押しても、モーダルダイアログを閉じないようにするには、同じくオプションで「keyboard」で『false』を設定してください。

なお、オプションをHTMLのタグで指定する際には、プレフィックスとして「data-bs-」を付けるようにしてください。詳しくは「オプション」を参照ください。

スクロール可能なモーダル

<div class="modal fade" id="modalScrollable"  tabindex="-1" aria-labelledby="modalScrollableLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

表示する内容が多く、スクロール可能なダイアログを設定したい場合には、モーダルダイアログ領域のclassに「modal-dialog-scrollable」を設定してください。

画面中央表示

<div class="modal fade" id="modalVerticallyCentered"  tabindex="-1" aria-labelledby="modalVerticallyCenteredLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      ..
    </div>
  </div>
</div>

モーダルダイアログの表示位置を画面上部ではなく中央センターに表示するには、モーダルダイアログ領域のclassに「modal-dialog-centered」を設定してください。

複数モーダル切り替え表示

モーダルウインドウ表示時に、別のモーダルウインドウに切り替えることも可能です。

<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle1" role="button">モーダル1へ</a>
<div class="modal fade" id="exampleModalToggle1" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      モーダル1
      <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">モーダル2へ</button>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      .モーダル2
      <button class="btn btn-primary" data-bs-target="#exampleModalToggle1" data-bs-toggle="modal" data-bs-dismiss="modal">モーダル1へ</button>
    </div>
  </div>
</div>

この場合でも、特に特別なことはする必要はなく、モーダル領域のidと「data-bs-target」の値を制御することで、複数のモーダルダイアログを切り替えることができます。

モーダルダイアログサイズ

モーダルには3つのオプションのサイズがあります。以下のようにモーダルダイアログ領域に「modal-dialog」クラスと一緒に指定してください。

<div class="modal fade" id="exampleModal6Sm" tabindex="-1" aria-labelledby="exampleModal6SmLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    ...
  </div>
</div>

3つのオプションサイズは以下の通りです。

サイズクラス(class)モーダルの最大サイズ
.modal-sm300px
(デフォルト)(なし)500px
.modal-lg800px
極大.modal-xl1140px

フルスクリーンモーダル

フルスクリーンのモーダルダイアログも可能です。以下のようにモーダルダイアログ領域に「modal-dialog」クラスと一緒に指定してください。

<div class="modal fade" id="exampleModalFull" tabindex="-1" aria-labelledby="exampleModalFullLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    ...
  </div>
</div>

常にフルスクリーンであるクラス「modal-fullscreen」のほかに、ディスプレイサイズに応じて、ディスプレイの解像度が値を満たさない場合にフルスクリーンになるクラスもあります。

クラス(class)条件
.modal-fullscreen常にフルスクリーン
.modal-fullscreen-xxl-down1400px未満の場合フルスクリーン
.modal-fullscreen-xl-down1200px未満の場合フルスクリーン
.modal-fullscreen-lg-down1200px未満の場合フルスクリーン
.modal-fullscreen-md-down768px未満の場合フルスクリーン
.modal-fullscreen-sm-down576px未満の場合フルスクリーン

Javascriptで実装

Javascriptでもモーダルダイアログを設定することもできます。

<div>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" onclick="showModal();">
    サンプル8(Javascript起動)
  </button>
  <!-- Modal -->
  <div class="modal fade" id="exampleModalJs" tabindex="-1" aria-labelledby="exampleModalJsLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalJsLabel">モーダルタイトル</h5>
        </div>
        <div class="modal-body">
          サンプル8<br />Javascript起動
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" onclick="hideModal();">閉じる</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var options = {backdrop:false,keyboard:false,focus:false};
  var myModal = new bootstrap.Modal(document.getElementById('exampleModalJs'), options);
  function showModal() {
    myModal.show();
  }
  function hideModal() {
    myModal.hide();
  }
</script>

Modal初期化

まず、「Modal」オブジェクトを初期化してください。

var options = {backdrop:false,keyboard:false,focus:false};
var myModal = new bootstrap.Modal(document.getElementById('exampleModalJs'), options);

まず、モーダル領域オブジェクトに対して、Modalを初期化してください。

モーダルダイアログ表示

myModal.show();

モーダルを開く場合には「show()」メソッドを呼び出してください。

モーダルダイアログ非表示

myModal.hide();

モーダルを閉じる場合には「hide()」メソッドを呼び出してください。

オプション

オプションはJavascriptで初期化する際に指定できると同時に、また、属性に、 『data-bs-(オプション名)=(値)』を設定することで指定できます。

backdrop

モーダル表示時の背景を暗くしたり、背景をクリックしたときの挙動を指定できるオプションです。

デフォルトは「true」です

説明
true背景が暗くなり、かつ、背景クリック時、モーダルが閉じます。
‘static’背景は暗くなり、かつ、背景をクリックしても、モーダルは閉じません。
false背景は暗くならず、かつ、背景をクリックしても、モーダルは閉じません。

keyboard

「true」にすると、モーダル表示時、キーボードの「Esc」(エスケープキー)クリック時、モーダルが閉じます。デフォルトは「true」です。

focus

true」にすると、モーダル初期化時、モーダルにフォーカスが移動します。

デフォルトは「true」です。

ご参考

関連ページ