Bootstrap5系でのモーダル（Modal）について

はじめに

Bootstrap5系を用いてモーダルを比較的簡単に実装できますが、記述するタグが多く、テキスト化して整理しておくことが必要だと考えました。
そこで、備忘録的に記事に残しておくことにしました。

実装環境

• Bootstrap 5.0.2
• Ruby 2.6.3
• Rails 6.1.6

※他の言語でも問題なく動くと思いますが、本記事ではRailsで動作確認をしております。

モーダルとは

そもそもモーダルとは何かという説明をしますと、画面に設置されたボタンをクリックすることで、他の画面に遷移することなく、ポップアップでウィンドウが表示されるものです。設置することでUI/UXの向上につながります。

Bootstrapでの実装方法

まず、はじめに全体の記述を示します。
以下の記述でモーダルを表示することができます。
ボタンとモーダル本体で構成されています。

modal.html.erb

<!-- モーダルを表示させるためのボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal_id">
　　　　モーダルボタン
</button>

<!-- モーダル本体 -->
<div class="modal fade" id="Modal_id" tabindex="-1" aria-labelledby="modal_id_Label" 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>
      </div>
    </div>
  </div>
</div>

それでは、以下にてそれぞれ解説していきます。

ボタン

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal_id">
　　　　モーダルボタン
</button>

通常のボタンの記述と変わりません。しかし、モーダルで出現させるためには、data-bs-toggle="modal"とdata-bs-target="id名"の記述が必要になります。ここで、data-bs-target="id名"はこの後記述するmodalのidと一致させておかなければなりません。また、Bootstrap5系より前のバージョンでは、(モーダルに限った話ではありませんが、bsを付ける必要がありますので、ご注意ください。4系とかの記事を参考にするとbsが入っていないので、動かない場合があります。)

モダール本体

• 【大枠】
  再掲になりますが、以下がモーダル本体です。

<div class="modal fade" id="Modal_id" tabindex="-1" aria-labelledby="modal_id_Label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      # ヘッダー
    　　　　# ボディ
　　　　　　　　　　　　# フッター
    </div>
  </div>
</div>

最初のdivタグでは、idが必要になります。ここが先ほどのボタンのdata-bs-targetと一致していなければなりません。aria-hiddenでは、モーダルを表示させたときに、背面を暗くするかどうかを変えることができます。また、通常、何も指定しなければモーダルの外側をクリックすることでモーダルを閉じることができるのですが、data-bs-backdrop="static"を追記することで、閉じるボタンを押さないとモーダルが閉じないようにできます。

2つ目のdivタグはモーダルの大きさや表示位置などを設定するものです。modal-lgでモーダルを大きく表示したり、modal-fullscreenでモーダルをフルスクリーンにしたり、modal-dialog-centeredでモーダルを画面中央に表示させたりすることができます。他にも様々なオプションが用意されているので、こちらの公式ドキュメントをご参照ください。

3つ目は実際にモーダルの中身を記述する箱のようなものです。HTMLの記述と同様、ヘッダー、ボディ、フッターで構成されています。

• 【ヘッダー】

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

modal-titleでタイトルを表し、右側にバツ印の閉じるボタンを用意します。（あくまで一般論なので、カスタマイズすることも可能です。）

• 【ボディ】

<div class="modal-body">
  中身
</div>

こちらは特筆すべきことはないですね。各々が表示したい内容を記述してください。もちろん入力フォーム等にすることも可能です。また、グリッドシステムを活用すつこともできます。

• 【フッター】

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>

ヘッダーでも閉じるボタンを用意しておりますが、フッターにも閉じるボタンを用意してあげると、ユーザービリティの向上につながるかと思います。他にも、ボディで入力フォームを配置した場合には、こちらにsubmitボタンを配置するとレイアウトが綺麗になります。

最後に

Bootstrapを使用したモーダル実装の解説は以上になります。
ユーザビリティを意識しながら積極的に活用していきたいですね。
自分の備忘のためでもありますが、どなたかのお役に立てれば幸いです。

参考記事

Bootstrap5 公式ドキュメント