CSS3とHTML5だけでモーダルダイアログを作る【JS不要】

作成日時：2021年10月14日 07時15分
最終更新日時：2021年10月14日 07時15分
Categories：フロントサイド
Tags：ウェブデザイン css3 html5

モーダルダイアログもとどのつまり、単なる表示非表示なので、HTMLとCSSだけで再現できる。

checkboxとlabelタグを使えば良いだけの話である。

ソースコード

まずHTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Hello World test!!</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <label class="modal_label" for="modal_chk">新規作成</label>

    <input id="modal_chk" class="modal_chk" type="checkbox">
    <div class="modal_body">
        <label class="modal_bg" for="modal_chk"></label>
        <div class="modal_content"></div>
    </div>

</body>
</html>

2つのlabelタグのfor属性はいずれもcheckboxのIDを指定させる。for属性が重複してもHTML的には何の問題も無い。

続いてCSS。これだけで成立する。

body { margin:0; }


.modal_label {
    border:solid 0.1rem black;
    padding:0.25rem;
    cursor:pointer;
}
.modal_body { display:none; }
.modal_chk { display:none; }
.modal_bg {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.8);
    cursor:pointer;
}
.modal_content {
    position:fixed;
    top:50%;
    left:50%;
    width:80%;
    height:80%;
    transform:translate(-50%,-50%);
    background:white;
}
input[type="checkbox"]#modal_chk:checked + .modal_body { display:block; }

HTMLの構造を工夫すればz-indexはいらない。

.modal_bgは子要素にfontawesomeのバツアイコンを表示させる可能性を考慮し、opacityではなくrgbaを使用して、子要素に不透明度の影響が及ばないようにしている。

checkboxの仕組みは、CSS3で折りたたみ式のサイドバーを実装させる【checkbox+transition+position】やCSS3でiOS風のトグルスイッチを作る方法【transition+checkbox】を元にしているので、それほど難しくはない。

動かすとこうなる

結論

モーダルダイアログも、ただの表示非表示の繰り返し。JavaScriptを使わなくても再現はできる。

もし、このモーダルダイアログの表示に簡単なアニメーションを実装させる場合、transitionによる遅延描画やtopやleftの配置、opacityによる不透明度の調整によって実現できるので、これまたJavaScriptは要らない。

ただ、複雑な計算を要する物はJavaScriptでなければ実現できない。