[Bootstrap]クリックした画像を浮かび上がらせる ー モーダルウィンドウ
Bootstrapの機能の一つモーダルウィンドウを紹介します。“モーダルウィンドウ”で検索をかけると実に様々な方法やスクリプトがあり、Webサイトに動きをつける機能の中で最も古い部類に入るものです。「レイアウトの都合上小さく埋め込んだ画像を詳しく見せたい、目に一緒に入ってくるテキストを一旦隠して画像だけ見せたい」時に適しています。
LiveDemoを試してみよう
Bootstrap公式サイトにモーダルに関するデモ付きのコードが置いてあります。
これを見てどのような仕組みになっているのか一緒に確かめてみましょう。
まずボタンを設置していますね。
1 2 3 4 | <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> |
2行目のdata-target="#myModal"をざっくりした意味に直すと「次にdiv id="myModal"と指定する部分とこのボタンは紐付いている」となります。
次は浮かび上がるウィンドウ、モーダルウィンドウの部分です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> |
実際にこちらでも表示してみましょう。
EXAMPLE
モーダルウィンドウ内のレイアウトが少しおかしいですが、後でcssで調整できそうです。
Bootstrapのモーダルの構造をざっくり説明すると
- ヘッダー・ボディー・フッターがあり
- ボディ部分にグリッドシステムが使える
- またモーダルウィンドウ部分の
.fadeを削除すると、アニメーションは無効になります
となります。
画像もモーダルウィンドウで表示してみよう
それでは本題ですね。画像を配置して、モーダルウィンドウで表示させます。
1.基本形を作ってみる
最低限の表示であれば、下のコードのようになります。また、画像はWordpress内に適当に入っていたものを使っています。
1 2 3 4 5 6 7 8 9 10 11 | <img src="http://pilgrim-guild.com/wp-content/uploads/2016/11/baby-1151351_1920.jpg" alt="baby-1151351_1920" width="1920" height="1440" class="aligncenter size-full wp-image-425" data-toggle="modal" data-target="#image-modal" /> <div class="modal fade" id="image-modal"> <div class="modal-dialog"> <div class="modal-body"> <img src="http://pilgrim-guild.com/wp-content/uploads/2016/11/baby-1151351_1920.jpg" alt="baby-1151351_1920" width="1920" height="1440" class="aligncenter size-full wp-image-425" /> </div> </div> </div> |
実際にどのような動きをするのか、確認します。
これでも悪くはないのですが、このように表示されている画面より小さくなってしまうこともありそうですし、画像自体もレスポンシブではありませんね。Bootstrapモーダルの幅は既定値が600pxでこういうことになっているのですね。少し変えていきましょう。
2.使いやすく調整してみる
ということで、変更したい点を挙げてみました。
- モーダルウィンドウ縦の表示位置を調整したい
- テキストも表示して中央揃えに
- 画像をレスポンシブ対応
- 閉じるボタンもつけましょう
- 画像の上にポインターを乗せてもリンクなのかわかりづらい
- Bootstrapなら簡単なのでサムネイルに
- 画像を大きく見せたい
下準備として、上記1.のモーダルウィンドウの縦表示位置をクラス.modal-middleと定義して調整します。ついでに2.と4.の表示させる予定のテキストとボタンも中央揃えにします。
1 2 3 4 5 6 7 8 | .modal-middle { //モーダルウィンドウの縦表示位置を調整 margin: 5% auto; } .modal-img_footer { //表示予定のテキストとボタンを中央揃え padding: .5em; text-align: center; } |
続いて文書構造にクラスとスタイルを追加して
3.のレスポンシブ画像に変更するなら設置した画像のimgタグに.img-responsive、6.のサムネイルにするには.thumbnailクラスを追加します。5.のカーソルを画面上に持って行ったら矢印から手のアイコンに変わるよう、style="cursor:pointer"を追加します。
また、7.のウィンドウを拡大するには.modal-lgクラスを表示するウィンドウに追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <img src="http://pilgrim-guild.com/wp-content/uploads/2016/11/baby-1151351_1920.jpg" alt="baby-1151351_1920" width="1920" height="1440" class="img-responsive thumbnail aligncenter size-full wp-image-425" data-toggle="modal" data-target="#image_Modal" style="cursor:pointer" /> //レスポンシブ対応・サムネイルに変更・画像上にポインターを置くと矢印から指になる <div class="modal fade" id="image_Modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg modal-middle"> //モーダルウィンドウの縦表示位置を調整・画像を大きく見せる <div class="modal-content"> <div class="modal-body"> <img src="http://pilgrim-guild.com/wp-content/uploads/2016/11/baby-1151351_1920.jpg" alt="baby-1151351_1920" width="1920" height="1440" class="aligncenter size-full wp-image-425" alt="baby-1151351_1920" /> </div> <div class="modal-img_footer"> <p>モーダル商品</p> //テキスト表示 <button type="button" class="btn btn-success" data-dismiss="modal">Close</button> //ボタンを取り付け </div> </div> </div> </div> |
2.のテキストと4.のボタンが10〜12行目の記述です。
3.実際に表示してみましょう！
画像の大小によってcssに.modal-middle-smや.modal-middle-lgを設定したり、表示画面の大きさに合わせて変えることもできます。
今回はBootstrapの中に用意されているモーダルウィンドウの説明でした。WordpressプラグインのAdd Quick Tagに登録したり、スニペット（小さなコードテンプレート）として保存するといいですね。他にも様々な機能が用意されているので、少しずつ紹介していきます。ねこま（@necomacustom）でした。