[css+js]極力cssに比重をおいたポップアップの設置方法案

しばらくこの方法が主流になりそう

動作・完成イメージ
HTML
CSS
js(jQuery)

動作・完成イメージ

動作的に下記の感じのものを作る場合。

開くボタンをクリック
フェードインでポップアップ要素を表示
閉じるor背景をクリック
フェードアウトでポップアップ要素を非表示

用途はポップアップとか、スマホ用のグローバルメニューとか。
ふわっとした感じで画面全体が白っぽく（黒っぽく）なって、要素を中央に配置する。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
</head>
<body>
    <div id="popup">
        <div class="wrap">
            <div class="background"></div>
            <div class="popup_set">
                <div class="btn"><span id="btn_close"></span></div>
                <div class="inner">中身</div>
            </div>
        </div>
    </div>
    <div class="btn"><span id="btn_open">POPUP</span></div>
</body>
</html>

こんな感じ。
ポップアップ要素は大枠（#popup）の直下に要素を配置するんじゃなくて、一枚更にかませるようにしてる（.wrap）。display:none;で非表示にするってなったときは中央配置が面倒なことになるんでそうしてる。display:flex;って便利ですよね。jsで.show()とかで表示した際はdisplay:block;になるんで、flex使いたいってんなら必須。今回は違うけど、作った後に何があるかもわからんので、まあ、保険。

CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');
#popup{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    opacity: 0;
    transition: opacity 0.4s;
}
#popup.active{
    z-index: 100;
    opacity: 1;
}
#popup .wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#popup .wrap .background{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.85);
}
#popup .wrap .popup_set{
    width: 100%;
    max-width: 400px;
    padding: 40px;
    background: #fff;
    z-index: 1;
}
#popup .wrap .popup_set .btn{
    width: 30px;
    height: 30px;
    position: fixed;
    top: 20px;
    right: 20px;
}
#popup .wrap .popup_set .btn span{
    width: 30px;
    height: 30px;
    display: block;
    position: relative;
    cursor: pointer;
    opacity: 0.8;
}
#popup .wrap .popup_set .btn span::before,
#popup .wrap .popup_set .btn span::after{
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    background: #fff;
    border-radius: 1px;
    position: absolute;
    top: 14px;
    left: 0;
}
#popup .wrap .popup_set .btn span::before{
    transform: rotate(45deg);
}
#popup .wrap .popup_set .btn span::after{
    transform: rotate(135deg);
}
#popup .wrap .popup_set .btn span:hover{
    opacity: 1;
}

長くなっちゃったけどまあ、これのギミックはopacityとz-indexがミソになる。更にtransitionでフェード効果をつけた。z-indexの数値は実際のコンテンツ外兼ね合いになるので注意、とりあえずでかい数字にしておけば間違いはない。

js(jQuery)

$(function(){
    $('#btn_open').on('click',function(){
        $('#popup').addClass('active');
    })
    $('#btn_close, #popup .background').on('click',function(){
        $('#popup').removeClass('active');
    })
})

jsではclassの切り替えだけ仕込めばいい。

効果をcssに任せてしまえばめっちゃシンプルになる。
後から手を加えることになってもcssだけ編集すれば済むから楽になる。

管理者が変わってもわかりやすくていい感じ。