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


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

考え方

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

構造

外観の表示イメージ

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

まわり

中央

HTML 構造イメージ

囲み:#lap

まわり:close用のAタグ.overlap
中央:innerWindow

やり方

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

黒く覆うときの全体画面となる要素はダイアログを開く前の時、見えないようにします。

visiblitiy:collapse;

ポップアップ(全体は非表示から表示へ切り替え)

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

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

0~100%の位置に表示し、ページ(document座標/スクロール座標)でなく表示上の画面(ビューポート座標)の特定位置に合わせるためrelativeでもstaticでもabsoluteでもなく position:fixed;にします。(参考:CSSだけで追従するボタンを実装してみた

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

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

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

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

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

囲みのCSS要素設定はは displayではなく、 visibilityにし、非表示前後(::target)属性で、 変化(リンクclick)前後に変えたいパラメータを設定します。

X
TITLE X Close

実現例

open dialog

コード

<p id="openlocation"><a href="#lap">open dialog</a>

<div  class="lap" id="lap">
        <a href="#openlocation" class="overlap">X</a>
    <div class="innerWindow">
        TITLE<br>
        <a href="#openlocation">X  Close</a>
    </div>
</div>
</p>

.lap{
    visibility: collapse;
}
.lap::target{
    visibility: visible;
}
.lap::target .overlap{
    opacity: 0.2;
    transition:  1s;    
}
.lap:target .innerWindow{
    opacity: 1;
    transition:  1s;    
}
.overlap{
    top:0;
    left:0;
    width:100%;
    height:100%;
    
    position:fixed;
    
    opacity:0;
    background:#000;
    
    z-index: 900;
}
.innerWindow{
    background:#fff;
    margin:10px;
    padding:20px;
    
    top:40%;
    left:40%;
    width:20%;
    height:20%;
    
    position:fixed;
    opacity:0;
    z-index:1000;
}

関連ページリンク

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

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

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

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

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

3,394 views.



コメントを残す

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