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

• モーダルとは
• Bootstrap5のモーダル
• 【実習】モーダルを作ってみよう

モーダルとは

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

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

Bootstrap5のモーダル

モーダルもBootstrapで用意されているテンプレートを使用すると簡単に実装出来ます。 

今回は、components >Modalページ内の「Live demo」というテンプレートを使います。
https://getbootstrap.jp/docs/5.0/components/modal/#live-demo

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

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

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

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

モーダル本体

ボタンタグの次の部分は、モーダルを作る為に必要なものですので、変更を加えることは不要です。
詳しい構造は以下イメージをご確認ください。

次は、編集が必要な箇所。
<div class="modal-content">の中身の部分です。
こちらは3つのパートに分かれています。

まずモーダルヘッダーのdiv。
ここでは、モーダルの見出しと、モーダルを閉じる✕ボタンを設定しています。

次に、モーダルボディクラスが出てきます。
これは、モーダル内の本文にあたる部分です。

最後に、モーダルフッターというクラスが出てきます。
これは、モーダル内下部の部分です。この中には、ボタンが２つ設置されています。
一つは、モーダルを閉じる為のボタンです。
もう一つは、モーダルの内容によりますが、送信フォームの様なものであれば保存ボタンとして使用するという感じです。

モーダルのサイズ

モーダルの大きさを変更できるCSSクラスも用意されています。

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

modal.htmlを作成して、モーダルの表示を確認してみましょう。
Modalの「Live demo」を、少しだけカスタマイズしてみます。

 

手順

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

 

【デフォルトサイズ】

　↓

【modal-xlクラス】