Bootstrap5のモーダルを理解して実装する【図解たっぷりBootstrap5入門】

• モーダル（Modal）の基本
• モーダルとは
• Bootstrap5のモーダル
• Bootstrap5のモーダルの構造
• 1.モーダルを表示するボタン
• 2.モーダル本体
• モーダルのカスタマイズ
• モーダルのサイズ（幅）を変更する
• 画面中央に配置
• 【実習】モーダルを作ってみよう
• 手順

モーダル（Modal）の基本

モーダルとは

モーダルとは、閉じるまで他の操作が出来なくなる小窓の様なものです。
他の操作とは、モーダル外のリンクのクリックなどです。

モーダルは、ポップアップとも呼ばれています。
広告などでも使われていますね。

Bootstrap5のモーダル

実装が難しそうなモーダルも、Bootstrapで用意されているテンプレートを使用すると簡単に作れます。 

Bootstrap5のドキュメントを確認してみましょう。
左メニュー、componentsグループにあるModalを開きます。

URL：https://getbootstrap.jp/docs/5.3/components/modal/

ボリュームのあるページで、右のローカルナビゲーションも項目が多いですね。
どこを見たら良いか迷いますが、モーダルの基本形といえるコードは「ライブデモ」に掲載されています。

Bootstrap5のモーダルの構造

モーダルではプラグイン（拡張機能を使う為のプログラム）を使用しています。
この場合の拡張機能とは、モーダルの事です。ですので、前回のアラートよりも複雑な構造になっています。

では、「ライブデモ」のコードを使って、モーダルの構造を見ていきましょう。
以下のように、モーダルは大きく2つのパーツに分かれています。

カスタマイズ含め、モーダルを使う為にはどの部分を編集すればよいのか確認しましょう。

1.モーダルを表示するボタン

Bootstrpでのモーダルは、ボタンがクリックされるとモーダルが表示される仕組みになっています。
ですので、最初にボタンタグが出てきます。
ボタンタグ内にはボタンに表示させる文言を書きます。

2.モーダル本体

ボタンタグの下からは、モーダル本体を構成するためのコードです。

モーダルを作る為に必要なものですので、大きく変更を加える必要はないでしょう。
複数のモーダルを設置するなどの理由で、idを変更することが一番多いかなと思います。

囲うdivが多いので少し分かりにくいですね。
実際にモーダルを表示して、コードと見比べると役割が分かりやすいです。

モーダルのコンテンツ

次は、<div class="modal-content">の中。
ここはモーダルのコンテンツ、ユーザーに伝えたい情報を入れる部分です。編集が必要になるでしょう。

テンプレートコードでは、大きく3つのブロックに分かれています。

まず、上段modal-headerクラスが指定されているdiv。
ここでは、モーダルの見出しと、モーダルを閉じる✕ボタンを設定しています。

次に、modal-bodyクラスのdivが出てきます。
これは、モーダルの中段、本文にあたる部分です。

最後に、modal-footerというクラスが出てきます。
これは、モーダル内下部の部分です。

テンプレートコードでは、中にボタンが２つ設置されています。
一つは、モーダルを閉じる為のボタンです。
もう一つは、送信フォームを想定して保存ボタンを作っているようです。このあたりは、モーダルの内容によって変わります。

モーダルのカスタマイズ

モーダルのサイズ（幅）を変更する

モーダルの大きさを変更できるCSSクラスも用意されています。
追加するのはmodal-dialogクラスが指定されている要素です。

画面中央に配置

modal-dialogクラスと一緒にmodal-dialog-centeredというクラスを加えると、モーダルの表示位置を画面（表示領域）のど真ん中に変更できます。
広告などでよく使われていますね。

【実習】モーダルを作ってみよう

modal.htmlを作成して、モーダルの表示を確認してみましょう。
モーダルの“ライブデモ”にあるテンプレートコードを貼り付け、少しカスタマイズします。

 

手順

1. Live demoのテンプレートコードをhtmlに貼り付ける
2. モーダルのタイトルを「クリックされました」に打ち替える
3. Save changesのボタンカラーを水色（info）に変更する
4. ブラウザでモーダルの表示を確認する
5. modal-xlクラスを使って、モーダルのサイズを変更
6. ブラウザで再度表示。モーダルサイズが大きくなったか確認

 

【デフォルトサイズ】

　↓

【modal-xlクラス】