JS 遮罩層控制

HTML

<header>
        <div class="header-wrapper">
            <a href="./index.html" class="logo">
                <img src="../images/logo.png" alt="logo" width="40" height="40">
                <p>LOGO</p>
            </a>
            <div class="header-center" style="display: none;">
                <ul>
                    <li><a href="./login.html">登入</a></li>
                    <li><a href="./index.html">首頁</a></li>
                    <li><a href="./rates.html">資費</a></li>
                    <li><a href="./notice.html">資訊</a></li>
                </ul>
            </div>
            <img src="../images/menu.png" alt="menu" class="menu" onclick="openMenu()">
            <a href="./login.html" class="login">登入</a>
        </div>
    </header>
           

CSS

header {
    z-index: 9;
}
.maskmodel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: #000;
    z-index: 8;
}
           

JAVASCRIPT

// 打開頭部菜單欄
function openMenu() {
    let menu = document.querySelector(\'.header-center\');
    if (menu.style.display === \'none\') {
        menu.style.display = \'block\';

        createMaskModel();
        handelMaskClose(menu)
    } else {
        closeMaskModel(menu)
    }
}

// 建立遮罩層
function createMaskModel() {
    var div = document.createElement(\'div\')
    div.setAttribute(\'class\', \'maskmodel\');
    document.querySelector(\'body\').appendChild(div);
}

// 關閉遮罩層并關閉菜單
function closeMaskModel(menu) {
    document.querySelector(\'.maskmodel\').remove();
    menu.style.display = \'none\';
}

// 遮罩層關閉點選事件
function handelMaskClose(menu) {
    document.querySelector(\'.maskmodel\').onclick = function () {
        closeMaskModel(menu)
    }
}

           

ps:别忘了設定遮罩層層樣式