ログインした時に表示される「ログインに成功しました」というアラート機能や、ポップアップが表示されるモーダル機能を取り入れてページのクオリティをアップさせてみましょう。
Modal(モーダル)
モーダルとは、閉じるまで他の操作が出来なくなる小窓の様なものです。 他の操作とは、モーダル外のリンクのクリックなどです。
モーダルは、ポップアップとも呼ばれています。広告などでも使われていますね。
こちらもBootstrapで用意されているテンプレートを使用すると簡単に実装出来ます。
今回は、Bootstrapサイト > コンポーネント > モーダル に掲載されている「Live demo」というテンプレートを使います。
では、モーダルの構造を見ていきます。 こちらは、プラグイン（拡張機能を使う為のプログラム）を使用しています。この場合の拡張機能とは、モーダルの事です。ですので、前回のアラートよりも複雑な構造になっています。
カスタマイズ含め、モーダルを使う為にはどの部分を編集すればよいのか確認しましょう。
Bootstrpでのモーダルは、ボタンがクリックされるとモーダルが表示される仕組みになっています。ですので、最初にボタンタグが出てきます。
ボタンタグ内にはボタンに表示させる文言を書きます。
ボタンタグの次の部分は、モーダルを作る為に必要なものですので、変更を加えることは不要です。詳しい構造は以下イメージをご確認ください。
次は、編集を行っていく部分です。 まずモーダルヘッダーのdiv内にｈ５タグがあります。このタグにはモーダルタイトルというクラスが与えられています。これは、モーダル内の見出しを作っている部分です。
次に、モーダルボディクラスが出てきます。 これは、モーダル内の本文にあたる部分です。
最後に、モーダルフッターというクラスが出てきます。 これは、モーダル内下部の部分です。
モーダルフッターの中には、ボタンが２つ設置されています。 一つは、モーダルを閉じる為のボタンです。もう一つは、モーダルの内容によりますが、送信フォームの様なものであれば保存ボタンとして使用するという感じです。
・モーダルのカスタマイズ
モーダルのカスタマイズについて学んでいきましょう。 先ほどのモーダルは、Bootstrapサイトのデモを試すと分かるかと思いますが、モーダルが画面上部に表示されるようになっていました。
これを、画面中央に表示させたい場合は以下のようにカスタマイズします。１つCSSクラスを追加するだけでOKです。
◆実習：モーダルを作ってみよう
では、modal.htmlを作成してModal-Bootstrapのページを参考に、いくつかモーダルを設置してみましょう。
1.オーソドックスなLive demo
解説でも使った「Live demo」項目にコードが載っているモーダルです。 コピー＆ペーストして、下図のようにテキストのみを打ち換えてみましょう。
2.Vertically centered
次は「Vertically centered」をコピー＆ペーストして、配色クラスとテキストを打ち換えてみて下さい。
並べてみるとLive demoでは画面上ウィンドウが出てくるのに対して、Vertically centeredは画面の真ん中にウィンドウが出てくることが良くわかると思います。
3.Using the grid
最後は「Using the grid」のシステムを使って、下図のようなモダールを表示させてみて下さい。
◎まとめ
・アラートは、警告や処理の結果をユーザに通知する為のもの
・モーダルは、閉じなければ他の操作は行えない