12.31蒙层创建-标杆思想

最新推荐文章于 2022-08-11 00:22:52 发布

lyu_ping

最新推荐文章于 2022-08-11 00:22:52 发布

阅读量810

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42443548/article/details/103789003

版权

蒙层创建-标杆思想

使用标杆思想，进行判定操作

let flag = false; //全局变量，判定蒙层是否打开

打开：true 关闭：false

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <button id="btn">蒙层</button>
    	<div id="mask"></div>
    </body>
    </html>

    let btn = document.querySelector("#btn");
    let dom = document.querySelector("#mask");
    //设置全局开关，用来判断蒙层是否打开
    let flag = false;
    btn.onclick = function () {
        //设置flag为true，表示蒙层打开
        flag = true;
        handleMask();
    }
    //动态获取当前窗口的宽高，并设置给蒙层
    function handleMask() {
        let wid = document.documentElement.clientWidth;
        let hei = document.documentElement.clientHeight;
        dom.style = `
            width: ${wid}px;
            height: ${hei}px;
            background:rgba(0,0,0,0.5);
            position: fixed;
            left: 0;
            top: 0;
            display: block;
            `
    }
	//当页面窗口大小变化时
    window.onresize = function () {
        //判定：只有当蒙版打开时，才执行下列操作
        if (flag === true) {
            handleMask();
        }
    }

    dom.onclick = function() {
        //隐藏蒙版，使用display，可以提高性能
        dom.style.display = "none"
        //把开关设置为false
        flag = false;
    }