| モーダルウィンドウ（英: Modal window）は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、ユーザーに注意を促したり、緊急の状態を知らせる目的でよく使われる。 |
webサイトではECサイトやギャラリーページなど画像を多数使用しているページなどでよく使用されています。
商品画像などは画像のサイズが大きいほどユーザーに伝わる情報量も多くなるので、なるべく大きい画像を用意したい。また商品画像の枚数が多いほどユーザーに伝わる情報量も多くなるので、なるべく多くの画像の用意したい。
この２つをそのままサイトに反映させてしまうと、webサイトが大きい画像だらけになり、レイアウトも制限され結果として見辛いサイトになってしまいます。
なので、モーダルウィンドウを使用し、サムネイル（小さいサイズの画像）を一覧で見せて、大きい画像を見たい場合はサムネイルをクリックし、大きい画像を別ウィンドウで表示させる必要があります。
■GUI
Graphical User Interfaceの略
グラフィカルで アイコンやメニューボタンなどが用意されていて、どのように操作すればよいのか分かりやすくなっている、インターフェース。
■CUI
Character User Interfaceの略
windowsのコマンドプロンプトやmacのターミナル文字だけでやり取りするインターフェース。全てのプログラムをコマンド画面から操作する事が可能です。
＜主なモーダルウィンドウ系のjQueryプラグイン＞
モーダルウィンドウといえば代表的な「Lightbox」
Lightboxより高機能な分、作りも少し複雑な「Fancybox」（ライセンスに注意）
こちらも多機能でカスタマイズが色々と出来るjQueryプラグイン「colorbox」
軽量でスマホ対応もバッチリな「remodal」
デスクトップ、スマホ、タブレット対応のLightboxプラグイン「Swipebox.」