JavaScript

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

  /

Web開発において、モーダル画面（Modal）は情報表示やユーザーとのインタラクションを行うための便利なUIコンポーネントです。
この記事では、簡単に理解できるように、Bootstrapを使ったモーダル画面の実装方法をわかりやすく解説します。
BootstrapはCSSとJavaScriptを活用して、手軽に洗練されたデザインを実現できるフレームワークです。

Contents

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

まずは、BootstrapのCSS（bootstrap.min.cssファイル）を読み込みましょう。CDNを利用することで、簡単に最新バージョンのBootstrapをプロジェクトに取り込むことができます。

<!-- 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">

このコードをHTMLの<head>タグ内に追加することで、Bootstrapのスタイルを利用できるようになります。

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

次に、モーダル画面を操作するために必要なJavaScript（bootstrap.bundle.min.jsファイル）を読み込みます。Bootstrapでは、JavaScriptの機能もCDNを使って簡単に追加できます。

<!-- 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の記述

モーダル画面のHTML構造を作成します。以下は、モーダルをトリガーするボタンと、実際のモーダル画面の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

この内容は、Bootstrap公式ドキュメントをもとに作成しています。詳細な情報は以下のリンクを参照してください。

Modal (モーダル) · Bootstrap

まとめ

Bootstrapを使えば、CSSやJavaScriptを手軽に導入してモーダル画面を実装できます。これにより、ユーザーエクスペリエンスを向上させ、魅力的なWebアプリケーションを構築できます。
この記事を参考に、ぜひモーダル画面を試してみてください！

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

モーダル modal Bootstrap
関連記事