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