モーダル（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を作成して、モーダルの表示を確認してみましょう。 モーダルの“ライブデモ”にあるテンプレートコードを貼り付け、少しカスタマイズします。
手順
- Live demoのテンプレートコードをhtmlに貼り付ける
- モーダルのタイトルを「クリックされました」に打ち替える
- Save changesのボタンカラーを水色（info）に変更する
- ブラウザでモーダルの表示を確認する
- modal-xlクラスを使って、モーダルのサイズを変更
- ブラウザで再度表示。モーダルサイズが大きくなったか確認
【デフォルトサイズ】
↓
【modal-xlクラス】
