JavaScript PR

Bootstrapを使って簡単にモーダル画面を表示する方法

  /
記事内に商品プロモーションを含む場合があります

Bootstrapを使って簡単にモーダル（Modal）画面を表示する方法をご紹介します。

Contents

Bootstrapを使って簡単にモーダル（Modal）画面を表示するCSSの記述

※CDNからbootstrap.min.cssファイルを読み込みます。

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Bootstrapを使って簡単にモーダル（Modal）画面を表示するJavaScriptの記述

※CDNからbootstrap.bundle.min.jsファイルを読み込みます。

<!-- JavaScript Bundle with Popper -->
<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>

Bootstrapを使って簡単にモーダル（Modal）画面を表示するHTMLの記述

※buttonタグ要素よりdata-bs-toggle=”modal”でモーダル用ボタン、data-bs-target=”#staticBackdrop”でターゲットとなるモーダル画面のidを指定します。モーダル画面（id=”staticBackdrop”）ではclass=”modal fade”にモーダル画面のclassを指定し、data-bs-backdrop、data-bs-keyboard等でモーダル画面が表示された場合の画面表示や制御を指定します。必要に応じて変更して下さい。

<h1 class="text-center pt-5">「モーダル画面を表示」ボタンをクリックするとモーダル画面が表示されます。</h1>

<div class="text-center pt-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  モーダル画面を表示
</button>
</div>

<!-- 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">
        右上の「×」ボタンまたは下の「閉じる」ボタンをクリックするとモーダル画面が閉じます。
      </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>

Bootstrapを使ったモーダル（Modal）画面表示デモページ

Bootstrapを使ったモーダル（Modal）画面表示デモページ

ソース元：Modal (モーダル) · Bootstrap

以下がソース元です。
Modal (モーダル) · Bootstrap

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

モーダル modal Bootstrap
RELATED POST