• 投稿日: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>

説明

input[type=checkbox]がモーダル表示を制御するタグで、<div id=”modal-view”>が実際にモーダル表示するタグです。

デモでは<button class=”view-modal”>と<button class=”close”>にクリックイベントリスナを設定し、表示切替処理を実行しています。

詳細

最後に

WebサイトもWebシステムも、どちらを作っていても使う可能性があるものです。

ちなみにモーダルとは、システムが特定の機能の使用にへ制限されている状態のことを言います。
なんとなく意味はわかっていましたが、全体を覆うように表示することや、機能を制限することだと思っていました。

いつになっても勉強は必要ですね

最後に

SPECIAL THANKS

  1. JavaScriptでスクロール禁止にする方法を解説! -Qumeru-
  2. モーダルって何? -WEB制作用語辞典-
WEB AR開発 A-Frame AR.js
JSアニメーション:文字の登場
CSSアニメーション:カク回転
画面右下固定のスクロールボタン
ajax通信でWordPressの記事情報を取得する
要素を取得・操作する
擬似クラス【hover / nth-of-type / nth-child】
疑似要素【before/after】