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

/**
 * Created by liuboxin on 2021/9/15.
 */

// 打开头部菜单栏
function openMask(selector) {
    let menu = document.querySelector(selector);

    if (menu.style.display === 'none') {
        menu.style.display = 'block';

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

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

// 关闭遮罩层并关闭菜单
function closeMaskModel(selector) {
    let menu = document.querySelector(selector);
    let mask = document.querySelector('.maskmodel');
    if (mask) {
        mask.remove();
    }
    if (menu) {
        menu.style.display = 'none';
    }
}

// 遮罩层关闭点击事件
function handelMaskClose(selector) {
    document.querySelector('.maskmodel').onclick = function () {
        console.log('close mask');
        closeMaskModel(selector)
    }
}

export { openMask, closeMaskModel };