モーダルな画面を表示をする

投稿日：2022年03月08日 12時27分08秒
更新日：2022年03月08日 13時59分56秒

デモ

説明・補足・注意事項

ボタンを押すと画面全体を覆うようにdivブロックを表示します。
表示している間は背面のスクロールを禁止しています。

×ボタンを押下すると閉じます。

Javascriptでコントロールをチェックしに行っているのは、イベントを起こすタグの位置を自由にするためです。

よくタブを作る例でinput[type=checkbox]と同じ位置にラベルを付けて、ラベルクリックでinput[type=checkbox]にチェックを入れるというものがあります。
あれは同じ位置にラベルが無いといけないのですが、これは自由になります。

modalCtrl

class modalCtrl{
    switch_modal(target_selector){

        console.log("start[switch_modal(target_selector = '" + target_selector + "')]");

        var elm_modalCtrl = document.querySelector(target_selector);
        console.log("modalCtrl.checked = " + elm_modalCtrl.checked);

        if(elm_modalCtrl.checked == true){ // モーダルを非表示に変更
            elm_modalCtrl.checked = false;
            this.scroll_on("html");
        }else{ // モーダルを表示に変更
            elm_modalCtrl.checked = true;
            this.scroll_off("html");
        }

    }

    // スクロールを禁止にする関数
    disableScroll(event) {
        event.preventDefault();
    }

    // スクロール禁止
    scroll_off(target_selector) {
        // イベントと関数を紐付け
        document.querySelector(target_selector).addEventListener('touchmove', this.disableScroll, { passive: false });
        document.querySelector(target_selector).addEventListener('mousewheel', this.disableScroll, { passive: false });
    }
    // スクロール解除 
    scroll_on(target_selector) {
        // イベントと関数を紐付け
        document.querySelector(target_selector).removeEventListener('touchmove', this.disableScroll, { passive: false });
        document.querySelector(target_selector).removeEventListener('mousewheel', this.disableScroll, { passive: false });
    }

}

説明

switch_modal関数に対象のinput[type=checkbox]のセレクタを渡します。

そうすると対象のタグの状態（checked）から判断し、表示/非表示を切り替えます。

また表示しているときは背面のスクロールを禁止します。

modalCtrlの表示を切り替えるCSS

input[name="modalCtrl"] {
    display: none;
}
#modal-view {
    background-color: rgba(0,0,0,0.6);
    backdrop-filter:blur(1px);
    display: block;

    /* 画面全体を覆い隠すように表示（モーダル） */
    width: 100vw;
    height: 100vh;
    position: fixed; /* 表示位置固定 */
    top: 0;
    left: 0;
    z-index: -1;

    /* 動きにかける時間 */
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;

    /* 基本非表示 */
    opacity: 0;
}
/* 選択、チェックしたときの動作 */
input:checked + #modal-view {
    opacity: 1;
    z-index: 9999;
}
/* モーダル表示させるコンテンツ */
#modal-view > .inner{

    background-color: beige;
    border-radius: 5px;
    width: 50%;
    height: 50%;
    margin: 0;

    /* 画面中央に表示 */
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

}
/* 閉じるボタン */
#modal-view > .inner > .close{
    width: auto;
    position: absolute;
    border:none;
    right: 0;
    z-index: 10;
    transform: scale(2);
    background-color: rgba(0,0,0,0);
}
/* 閉じるボタンをわかりやすく */
#modal-view > .inner > .close:hover{
    cursor: pointer;
    cursor: hand;
}

説明

input[name=”modalCtrl”]は表示制御をするためだけのタグなので非表示にします。

あとはコメントに色々書いているのでそちらを見てください。

表示切替用のinput[type=checkbox]と表示するdivブロック

<input type="checkbox" name="modalCtrl" />
<div id="modal-view">
    <div class="inner">
        <button class="close">×</button>
    </div>
</div>
<div class="menu-btn">
    <button class="view-modal">モーダル表示</button>
</div>