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:别忘了设置遮罩层层样式

版权声明：本文为lbx6935原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/lbx6935/p/15160809.html