吉田先生
ポップアップが表示されるモーダル機能を取り入れてページのクオリティをアップさせてみましょう。
モーダルとは、閉じるまで他の操作が出来なくなる小窓の様なものです。
他の操作とは、モーダル外のリンクのクリックなどです。
モーダルは、ポップアップとも呼ばれています。
広告などでも使われていますね。
モーダルもBootstrapで用意されているテンプレートを使用すると簡単に実装出来ます。
今回は、components >Modalページ内の「Live demo」というテンプレートを使います。
https://getbootstrap.jp/docs/5.0/components/modal/#live-demo
では、モーダルの構造を見ていきます。
こちらは、プラグイン(拡張機能を使う為のプログラム)を使用しています。
この場合の拡張機能とは、モーダルの事です。ですので、前回のアラートよりも複雑な構造になっています。
カスタマイズ含め、モーダルを使う為にはどの部分を編集すればよいのか確認しましょう。
Bootstrpでのモーダルは、ボタンがクリックされるとモーダルが表示される仕組みになっています。
ですので、最初にボタンタグが出てきます。
ボタンタグ内にはボタンに表示させる文言を書きます。
ボタンタグの次の部分は、モーダルを作る為に必要なものですので、変更を加えることは不要です。
詳しい構造は以下イメージをご確認ください。
次は、編集が必要な箇所。
<div class="modal-content">の中身の部分です。
こちらは3つのパートに分かれています。
まずモーダルヘッダーのdiv。
ここでは、モーダルの見出しと、モーダルを閉じる✕ボタンを設定しています。
次に、モーダルボディクラスが出てきます。
これは、モーダル内の本文にあたる部分です。
最後に、モーダルフッターというクラスが出てきます。
これは、モーダル内下部の部分です。この中には、ボタンが2つ設置されています。
一つは、モーダルを閉じる為のボタンです。
もう一つは、モーダルの内容によりますが、送信フォームの様なものであれば保存ボタンとして使用するという感じです。
モーダルの大きさを変更できるCSSクラスも用意されています。
modal.htmlを作成して、モーダルの表示を確認してみましょう。
Modalの「Live demo」を、少しだけカスタマイズしてみます。
1.Live demoのテンプレートコードをhtmlに貼り付ける
2.モーダルのタイトルを「クリックされました」に打ち替える
3.Save changesのボタンカラーを水色(info)に変更する
4.ブラウザでモーダルの表示を確認する
5.「modal-xl」クラスを使って、モーダルのサイズを変更
6.ブラウザで再度表示。モーダルサイズが大きくなったか確認
【デフォルトサイズ】
↓
【modal-xlクラス】
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。