CSS サンプル: JavaScriptを使わないダイアログ

チェックボックスのON・OFFをもとにダイアログ開閉を実現します。(ボタンや背景はチェックボックスに連動する<label>になっています)

ダイアログ(シンプル) ダイアログを開く(+ヘッダー) ダイアログを開く(+ヘッダー・フッター)

ダイアログのサンプルです。
ヘッダーやフッターのないものになります。
ダイアログの高さがブラウザの高さより大きくなりそうな場合は、
スクロールバーが出ます。

ダイアログのサンプルです。
ヘッダーがあるものです。

ダイアログのサンプルです。
ヘッダーとフッターがあるものです。