モーダルダイアログを使うメリットとしては、他のウィンドウが操作できなくなり、
モーダルで表示されている画面のみ操作が可能、という効果があります。
たいていはJavaScriptの関数を使ってモーダルダイアログを生成しますが、
ここではCSSを使って、同じ画面内で擬似的にモーダルダイアログのような
効果を出す方法を紹介します。
元ネタはJavaScriptライブラリのLightbox JSですが、CSS/JavaScriptともに
最低限の記述に抑えて、少し加工しています。
内容は、通常の画面と擬似モーダル画面をstyle.displayで切り替えているだけです。
擬似モーダル画面は、CSSでレイアウトや重ね合わせを制御しています。
同じ画面内でモーダルのような効果を出すため、
別ウィンドウで表示するモーダルとは使い方が大きく違ってきますが、
使いどころによっては便利ではないでしょうか。
