はじめに
Bootstrap5系を用いてモーダルを比較的簡単に実装できますが、記述するタグが多く、テキスト化して整理しておくことが必要だと考えました。
そこで、備忘録的に記事に残しておくことにしました。
実装環境
- Bootstrap 5.0.2
- Ruby 2.6.3
- Rails 6.1.6
※他の言語でも問題なく動くと思いますが、本記事ではRailsで動作確認をしております。
モーダルとは
そもそもモーダルとは何かという説明をしますと、画面に設置されたボタンをクリックすることで、他の画面に遷移することなく、ポップアップでウィンドウが表示されるものです。設置することでUI/UXの向上につながります。
Bootstrapでの実装方法
まず、はじめに全体の記述を示します。
以下の記述でモーダルを表示することができます。
ボタンとモーダル本体で構成されています。
<!-- モーダルを表示させるためのボタン -->
<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を使用したモーダル実装の解説は以上になります。
ユーザビリティを意識しながら積極的に活用していきたいですね。
自分の備忘のためでもありますが、どなたかのお役に立てれば幸いです。