arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[Bootstrap]クリックした画像を浮かび上がらせる ー モーダルウィンドウ

Bootstrapの機能の一つモーダルウィンドウを紹介します。“モーダルウィンドウ”で検索をかけると実に様々な方法やスクリプトがあり、Webサイトに動きをつける機能の中で最も古い部類に入るものです。「レイアウトの都合上小さく埋め込んだ画像を詳しく見せたい、目に一緒に入ってくるテキストを一旦隠して画像だけ見せたい」時に適しています。

LiveDemoを試してみよう

Bootstrap公式サイトにモーダルに関するデモ付きのコードが置いてあります。
これを見てどのような仕組みになっているのか一緒に確かめてみましょう。
まずボタンを設置していますね。

2行目のdata-target="#myModal"をざっくりした意味に直すと「次にdiv id="myModal"と指定する部分とこのボタンは紐付いている」となります。
次は浮かび上がるウィンドウ、モーダルウィンドウの部分です。

実際にこちらでも表示してみましょう。

EXAMPLE


モーダルウィンドウ内のレイアウトが少しおかしいですが、後でcssで調整できそうです。
Bootstrapのモーダルの構造をざっくり説明すると

  • ヘッダー・ボディー・フッターがあり
  • ボディ部分にグリッドシステムが使える
  • またモーダルウィンドウ部分の.fadeを削除すると、アニメーションは無効になります

となります。

画像もモーダルウィンドウで表示してみよう

それでは本題ですね。画像を配置して、モーダルウィンドウで表示させます。

1.基本形を作ってみる

最低限の表示であれば、下のコードのようになります。また、画像はWordpress内に適当に入っていたものを使っています。

実際にどのような動きをするのか、確認します。
baby-1151351_1920

これでも悪くはないのですが、このように表示されている画面より小さくなってしまうこともありそうですし、画像自体もレスポンシブではありませんね。Bootstrapモーダルの幅は既定値が600pxでこういうことになっているのですね。少し変えていきましょう。

2.使いやすく調整してみる

ということで、変更したい点を挙げてみました。

  1. モーダルウィンドウ縦の表示位置を調整したい
  2. テキストも表示して中央揃えに
  3. 画像をレスポンシブ対応
  4. 閉じるボタンもつけましょう
  5. 画像の上にポインターを乗せてもリンクなのかわかりづらい
  6. Bootstrapなら簡単なのでサムネイルに
  7. 画像を大きく見せたい

下準備として、上記1.のモーダルウィンドウの縦表示位置をクラス.modal-middleと定義して調整します。ついでに2.と4.の表示させる予定のテキストとボタンも中央揃えにします。

続いて文書構造にクラスとスタイルを追加して
3.のレスポンシブ画像に変更するなら設置した画像のimgタグに.img-responsive、6.のサムネイルにするには.thumbnailクラスを追加します。5.のカーソルを画面上に持って行ったら矢印から手のアイコンに変わるよう、style="cursor:pointer"を追加します。
また、7.のウィンドウを拡大するには.modal-lgクラスを表示するウィンドウに追加します。

2.のテキストと4.のボタンが10〜12行目の記述です。

3.実際に表示してみましょう!

baby-1151351_1920

画像の大小によってcssに.modal-middle-sm.modal-middle-lgを設定したり、表示画面の大きさに合わせて変えることもできます。


今回はBootstrapの中に用意されているモーダルウィンドウの説明でした。WordpressプラグインのAdd Quick Tagに登録したり、スニペット(小さなコードテンプレート)として保存するといいですね。他にも様々な機能が用意されているので、少しずつ紹介していきます。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP