Bootstrap

Bootstrapでモーダル（Modal）を作る方法

2022年7月30日 by single コメントはまだありません

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>サンプル１</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
          サンプル１
        </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">
                サンプル１
              </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>サンプル２</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
          サンプル２（モーダルロック）
        </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">
                サンプル２<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>サンプル３</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalScrollable">
          サンプル３（スクロールあり）
        </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">
                サンプル３<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>サンプル４</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalVerticallyCentered">
          サンプル４（中央表示）
        </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">
                サンプル４<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>サンプル５</h4></div>
      <div>
        <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle1" role="button">サンプル５（複数モーダル切り替え）</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">モーダル１</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                複数モーダル切り替え<br />モーダル１
              </div>
              <div class="modal-footer">
                <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">モーダル２へ</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">モーダル２</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                複数モーダル切り替え<br />モーダル２
              </div>
              <div class="modal-footer">
                <button class="btn btn-primary" data-bs-target="#exampleModalToggle1" data-bs-toggle="modal" data-bs-dismiss="modal">モーダル１へ</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル６</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal6Sm">
          サンプル６（.modal-sm）
        </button>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal6Lg">
          サンプル６（.modal-lg）
        </button>
        
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal6Xl">
          サンプル６（.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">
                サンプル６<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">
                サンプル６<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">
                サンプル６<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>サンプル７</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFull">
          サンプル７（フルスクリーン）
        </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">
                サンプル７<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>サンプル８</h4></div>
      <div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" onclick="showModal();">
          サンプル８（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">
                サンプル８<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>

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

フレームワークBootstrap5の導入方法

モーダル実装

Modal (モーダル)

モーダル領域オブジェクト生成

<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">モーダル１へ</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">
      モーダル１
      <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">モーダル２へ</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">
      .モーダル２
      <button class="btn btn-primary" data-bs-target="#exampleModalToggle1" data-bs-toggle="modal" data-bs-dismiss="modal">モーダル１へ</button>
    </div>
  </div>
</div>

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

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

Optional sizes

モーダルには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>

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

サイズ	クラス(class)	モーダルの最大サイズ
小	.modal-sm	300px
（デフォルト）	（なし）	500px
大	.modal-lg	800px
極大	.modal-xl	1140px

フルスクリーンモーダル

Fullscreen Modal

フルスクリーンのモーダルダイアログも可能です。以下のようにモーダルダイアログ領域に「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-down	1400px未満の場合フルスクリーン
.modal-fullscreen-xl-down	1200px未満の場合フルスクリーン
.modal-fullscreen-lg-down	1200px未満の場合フルスクリーン
.modal-fullscreen-md-down	768px未満の場合フルスクリーン
.modal-fullscreen-sm-down	576px未満の場合フルスクリーン

Javascriptで実装

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

<div>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" onclick="showModal();">
    サンプル８（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">
          サンプル８<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()」メソッドを呼び出してください。

オプション

Options

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

backdrop

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

デフォルトは「true」です

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

keyboard

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

focus

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

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

Bootstrapでモーダル（Modal）を作る方法

Bootstrapでモーダル（Modal）を作る方法

デモ

HTMLコード

実装方法

Bootstrap導入

モーダル実装

モーダル領域オブジェクト生成

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

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

リンクの場合

リンク以外の場合

閉じるボタン実装

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

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

画面中央表示

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

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

フルスクリーンモーダル

Javascriptで実装

Modal初期化

モーダルダイアログ表示

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

オプション

backdrop

keyboard

focus

ご参考

関連ページ

Related Posts

広告

アーカイブ

カテゴリー

Recent Posts

VYM運用報告（2024年9月）

SPYD運用報告（2024年9月）

HDV運用報告（2024年9月）

家計簿公開（2024年8月）

ゴールドファンド（金の投資信託）運用報告(2024年9月)