WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

モーダルウィンドウ

モーダルウィンドウ(英: Modal window)は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、ユーザーに注意を促したり、緊急の状態を知らせる目的でよく使われる。

webサイトではECサイトやギャラリーページなど画像を多数使用しているページなどでよく使用されています。

online.actus-interior.com



商品画像などは画像のサイズが大きいほどユーザーに伝わる情報量も多くなるので、なるべく大きい画像を用意したい。
また商品画像の枚数が多いほどユーザーに伝わる情報量も多くなるので、なるべく多くの画像の用意したい。
この2つをそのままサイトに反映させてしまうと、webサイトが大きい画像だらけになり、レイアウトも制限され結果として見辛いサイトになってしまいます。

なので、モーダルウィンドウを使用し、サムネイル(小さいサイズの画像)を一覧で見せて、大きい画像を見たい場合はサムネイルをクリックし、大きい画像を別ウィンドウで表示させる必要があります。




主なモーダルウィンドウ系のjQueryプラグイン

モーダルウィンドウといえば代表的な「Lightbox
lokeshdhakar.com


Lightbox」より高機能な分、作りも少し複雑です(ライセンスに注意)
fancyapps.com


こちらも多機能でカスタマイズが色々と出来るjQueryプラグイン「colorbox」
Colorbox - a jQuery lightbox


軽量でスマホ対応もバッチリな「remodal」
vodkabears.github.io


動画をモーダルで表示
http://chiyo-katsumasa.com/video/