【CSS】シンプルなCSSだけでモーダルダイアログを動かす【実例動作付き】


JavaScriptを使わずに、CSSでモーダルダイアログを実装します。 あまり体裁を書くと、肝心な部分がわかりずらくなるため 必要最低限のコードにしています。 言葉だけではわかりずらいので イメージと実際に試せる動作サンプル(アニメーション付き)を載せています。

考え方

画面いっぱいに、レイヤーを敷き、中央にダイアログボックスを模した箱を表示する。

構造

外観の表示イメージ

ディスプレイ全体に表示↓

まわり
中央

HTML 構造イメージ

 

囲み:#lap
まわり:close用のAタグ.overlap
中央:innerWindow

 

やり方

画面全体を黒く表示させて、その中に ウインドウを表示します。

 

全体はダイアログを開く前は、見えないようにします。

visiblitiy:collapse;

全体は非表示

リンク(aタグ)でダイアログを開き(idを指定) 選択されたら ::target属性で囲みの内容を非表示から表示に変えます。

 

黒い部分(aタグ)を画面いっぱいにするので、

0~100%の位置に表示し、ページでなく表示上の画面に合わせるためrelativeでもstaticでもabsoluteでもなく position:fixed;にします。(参考:CSSだけで追従するボタンを実装してみた

内部のウインドウ(innerWindow)は

今回 白に設定して、ダイアログ内のパーツ(タイトルやクローズボタン)を並べます。中央表示するため 40%~+20%のように指定します。

画面の黒い部分をクリックさせクローズするために、

Aタグの方を 黒くて薄いラップにします。ただそうするとAタグの中にモーダルなダイアログを出す構造になってしまい、ダイアログの表示がうまくいかないので、それを避けるためにAタグと並列に 白いダイアログ(innerWindow)をHTML構造で用意します。並列関係にしたので念のため、z-indexも指定します。戻る位置も、開いた場所にします。

アニメーションにしたいため

囲みは visibilityにし、非表示前後(::target)属性で、変化前後として変えたいパラメータを設定します。

実現例

open dialog

X
TITLE
X Close

コード

 

 

関連ページリンク

【CSS】タブメニューをCSSだけでシンプルに作る【動作実例付き】

【CSS】モーダルダイアログをCSSだけで最小限のコードで動かす【実例動作付き】

【CSS】覚えたての人向け。8つのよくあるCSS実践Webテクニック。余計な装飾やロジックはないので肝心なところを理解しやすい

【CSS】モーダルダイアログをCSSだけで最小限のコードで動かす【実例動作付き】

 

 

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です