zoukankan      html  css  js  c++  java
  • 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;
         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);
        document.querySelector('.maskmodel').remove();
        menu.style.display = 'none';
    }
    
    // 遮罩层关闭点击事件
    function handelMaskClose(selector) {
        document.querySelector('.maskmodel').onclick = function () {
            closeMaskModel(selector)
        }
    }
    
    export { openMask, closeMaskModel };
    

    ps:别忘了设置遮罩层样式

  • 相关阅读:
    Representation Data in OpenCascade BRep
    Render OpenCascade Geometry Surfaces in OpenSceneGraph
    Render OpenCascade Geometry Curves in OpenSceneGraph
    OpenCascade Shape Representation in OpenSceneGraph
    Geometry Surface of OpenCascade BRep
    Geometry Curve of OpenCascade BRep
    Tyvj2017清北冬令营入学测试
    Spfa算法模板
    洛谷1016 旅行家的预算
    洛谷1290 欧几里得的游戏
  • 原文地址:https://www.cnblogs.com/lbx6935/p/15160809.html
Copyright © 2011-2022 走看看