いろいろなモーダルウィンドウの実装

モーダルウィンドウを実装するためには、ウィンドウを表示している状態と表示していない状態を切り替える仕掛けがあればよい。

CSS のみでモーダルウィンドウを実装 (1)

状態の区別をチェックボックスで行い、css の擬似属性 :checked を使って表示/非表示のスタイルを切り替える。

CSS のみでモーダルウィンドウを実装 (2)

こちらは css の擬似要素 :target で表示/非表示のスタイルを切り替えている。ボタンは a 要素で実装し、モーダルを表示するのと非表示にするのとでリンク先を変える。

JavaScript も使ってモーダルウィンドウを実装

普通の JavaScript による実装がやはり落ち着く。ボタンを押すたびにモーダルウィンドウのクラスが切り替わる。「文書構造と振る舞いは分離すべし」という哲学に従えば、css をハックするよりも JavaScript で実装したほうが健全であろう。