Bootstrap5でモーダル実装【コードサンプルあり】│関東・名古屋・福岡のホームページ制作会社│アイエムワークス株式会社

070-2017-3870 無料相談・お見積り
BLOG
開発者ブログ

Bootstrap5でモーダル実装【コードサンプルあり】

Bootstrap5 Modalの実装方法

こんにちは。
今回はBootstrap5における「Modal」のサンプル付きで実装方法をご紹介いたします！

はじめに

Bootstrap5系を用いてモーダルの実装方法をご紹介します。
Bootstrapは、コンポーネントを利用することで、開発効率を大幅に向上させることができます。

モーダル（モーダルウィンドウ）は、ユーザーインターフェースにおいて非常に便利な要素です。
画面スペースの有効活用やユーザー体験の向上、アニメーションやトランジション効果などのメリットが見込めます。

ここでは、Bootstrap 5を使用してモーダルを実装する手順を詳しく見ていきましょう。

Bootstrap 5の読み込み

まずは、Bootstrap 5 を扱えるようにするため、Bootstrap 5をHTMLに読み込んでいきましょう。

Bootstrap 5は予めCDNなどで用意されています。
インストール方法は、コマンド、CDN、自サーバーにダウンロードするなど方法は様々ですが、
今回はBootstrap公式のCDN「jsDelivr」から読み込んでいきます。

Bootstrapのインクルード

モーダルを正しく表示させるためには、BootstrapのCSSとJavaScriptをプロジェクトに含める必要があります。以下のコードを<head>タグ内に追加します。

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS Bundle (Popper.jsも含まれています) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5の読み込みは以上です！！
簡単ですね～

モーダルの基本構造

基本的なModal

モーダルを実装するためには、以下のコードを埋め込めば動くようになります！

ちなみに、モーダルの基本的な構成要素が定義されており、これを基にカスタマイズが可能です。
カスタマイズは基本構造が理解できれば、とても簡単にできますヨ！

<!-- モーダルを開くボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  モーダルを表示
</button>

<!-- モーダルの本体 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">モーダルのタイトル</h1>
        <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>
基本モーダルのサンプル

複数のモーダルを使用する場合のID設定

同一ぺージで複数のModalを利用する場合、ちょっとしたカスタマイズが必要になります。
先ほどのModalのコードをベースに解説していきます。

<!-- モーダルを開くボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#任意のID">
  モーダルを表示
</button>

<!-- モーダルの本体 -->
<div class="modal fade" id="任意のID" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">モーダルのタイトル</h1>
        <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>

上記コードを見て頂ければご理解いただけるかと思いますが、
button内のdata-bs-targetと、.modalのあるdiv要素のidを任意の文字列に変更します。
これでOKです。

複数モーダルのサンプル

すぐにできるModalのオプション

Bootstrap 5のModalは、予めさまざまなオプションが用意されています。
基本的なModalの実装方法はご理解いただけたかと思うので、次は簡単に実装可能なModalのオプションをサンプル付きで紹介します！

静的なバックドロップ

基本的なモーダルでは、展開時にモーダルの外側をクリックすると、自動的にモーダルが閉じる仕様になっています。バックドロップを静的に設定していると、その外側をクリックしてもモーダルが閉じません。

.modalのあるdiv要素にdata-bs-backdrop=”static”の追加で実装出来ます。

<!-- Modal -->
<div class="modal fade" data-bs-backdrop="static">

全体のコードはこちら
data-bs-backdrop=”static”が7行目の末尾についています。

<!-- モーダルを開くボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  モーダルを表示
</button>

<!-- モーダルの本体 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">モーダルのタイトル</h1>
        <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>
静的なバックドロップサンプル

長いコンテンツをスクロールする（基本）

特に何も気にせずに、基本構成で実装した場合は、モーダルがユーザーのビューポートやデバイスに対して長すぎると、ページ自体から独立してスクロールします。

<!-- モーダルを開くボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  長いコンテンツをスクロールする - 基本
</button>

<!-- モーダルの本体 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">長いコンテンツをスクロールする</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        画面を小さくしてみてください
        <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>
長いコンテンツをスクロールする

長いコンテンツをスクロールする（モーダル内でスクロール）

モーダル内でスクロールさせるには、.modal-dialogに.modal-dialog-scrollableを追加することで実現できます。

<!-- モーダルの本体 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">

コード全体はこちら
8行目に.modal-dialog-scrollableを追加しています。

<!-- モーダルを開くボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  長いコンテンツをスクロールする - モーダル内でスクロール
</button>

<!-- モーダルの本体 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">長いコンテンツをスクロールする</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        画面を小さくしてみてください
        <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>
モーダル内でスクロール

縦垂直方向の中央に配置

今までのモーダルは画面上部に表示されていましたが、画面中央にモーダルを表示させることもできます！

モーダルを画面中央に表示させるには、.modal-dialogに.modal-dialog-centeredを追加することで実現できます。

コード全体はこちら
8行目に.modal-dialog-centeredを追加しています。

<!-- モーダルを開くボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  長いコンテンツをスクロールする - モーダル内でスクロール
</button>

<!-- モーダルの本体 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">長いコンテンツをスクロールする</h1>
        <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>
縦垂直方向の中央に配置

オプションのサイズ

モーダルには予め3種類のオプションサイズがあり、.modal-dialogにサイズ指定用のクラスを充てる事で実現できます。

SizeClassModal max-width
Small.modal-sm300px
MediumNone500px
Large.modal-lg800px
Extra large.modal-xl1140px

※デフォルトは”medium”サイズのモーダルです。

<!-- モーダルの本体 -->
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

コード全体はこちら
8行目に.modal-xlを追加しています。

<!-- モーダルを開くボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  長いコンテンツをスクロールする - モーダル内でスクロール
</button>

<!-- モーダルの本体 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">長いコンテンツをスクロールする</h1>
        <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 5を使ったモーダルの基本的な実装方法に加えて、モーダルの中央表示やスクロール対応、サイズ変更、固定といったカスタマイズやオプションをサンプルコード付きで紹介しました。

これらの設定だけでも十分に役立ちますが、さらに豊富なオプションが公式ドキュメントに掲載されています。公式ドキュメントでは、アニメーションの有無、キーボード操作の制御、その他の詳細設定についても紹介されていますので、こちらもぜひ合わせて確認してみてください。

公式ドキュメント(Githubで見る)を参考にして、プロジェクトやユーザー体験に合わせた最適なモーダルを作成してみましょう。

Webに関するお問い合わせ

Web制作やその他のWeb関連のお問い合わせやご相談は、こちらからどうぞ。

Webに関するお問い合わせ
Bootstrap 4からBootstrap 5の主な変更点と、導入時に押さえておきたいポイントをまとめました。

Bootstrap 5とBootstrap 4の主要変更点を比較

Bootstrap 4からBootstrap 5の主な変更点と、導入時に押さえておきたいポイントをまとめました。

ブログ一覧に戻る

LATEST BLOG 最新のブログ

BLOG CATEGORY カテゴリー

BLOG TAG タグ

ARCHIVE アーカイブ

その他のHTML・CSS

その他のHTML・CSSを見る

CONTACT US

お見積りやご相談は、メール又はお電話にてお気軽にご連絡ください。
担当者が丁寧に対応いたします。

無料相談・お見積り