[css+jQuery]モーダルウィンドウ自作手引

パターン入ったんでログに残しておく。

基本形
応用的な話
デモ

基本形

<!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.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</head>
<body>
    <a id="popup_show">表示</a>
    <div class="popup" id="samplePopup">
        <div class="wrap">
            <div class="bg"></div>
            <div class="set">
                <div class="close"><span id="closePopup">閉じる</span></div>
                <div class="inner">中身</div>
            </div>
        </div>
    </div>
    <div style="height: 2000px;"></div>
</body>
</html>

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,*::before,*::after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}

.popup{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}
.popup .wrap{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.popup .wrap .bg{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
}
.popup .wrap .set{
    width: calc(100% - 40px);
    max-width: 800px;
    height: 400px;
    z-index: 1;
    position: relative;
    background: #fff;
}
.popup .wrap .set .close{
    position: absolute;
    top: -40px;
    right: 0;
}
.popup .wrap .set .close span{
    width: 40px;
    height: 40px;
    display: block;
    cursor: pointer;
}
.popup .wrap .set .inner{
/* 中身 */
}

$(function(){
    $('#popup_show').click(function(){
        $('#samplePopup').fadeIn();
    })
    $('#samplePopup .bg,#closePopup').click(function(){
        $('#samplePopup').fadeOut();
    }

例えばheaderを固定表示してるとか、ポップアップにかぶってくる要素があった場合は親（.popup）にz-indexを仕込む。

ネックになるのはhtmlで、必要最低限、不足のない構成はこれだと思う。中央配置はflexに任せてしまえばポップアップ要素のサイズに自由度が効く。そのためには.popup自体じゃなくて1階層（.wrap）足してflex用にする。.popup表示時にdisplay:block;になっても支障がないのでjsで.show()やら.fadeIn()が使える。

例では.fadeOut()はclassで指定してるけど、通常はidを振っておくのが無難。

閉じる行為において、「閉じるボタン」に限定するのは今どきっぽくない。背景部分をクリックしたときも閉じるようにしておくのが使いやすい。

応用的な話

ポップアップはシンプルにするのが一般的だけど、内容によってはめちゃくちゃ長くなることもある。スクロールが欲しくなることもある。overflow-y:scroll;でやるわけだけど、直接付与するよりは階層を足した方が安全。問題があるとすればスクロールバーで、PCだとデフォルトのデザインならもっさりして邪魔くさいし、スマホだとスクロール箇所があるかどうかわかりにくくなる場合もある。ついでに、ポップアップ表示時はブラウザのスクロールを無効化しといたほうがいい。

デモ

次の記事の使い回しだけど。

Document