div遮罩层

最新推荐文章于 2023-12-08 16:42:56 发布

Jyann~

最新推荐文章于 2023-12-08 16:42:56 发布

阅读量1.9w

点赞数 6

分类专栏： JS高级案例文章标签： div遮罩层

本文链接：https://blog.csdn.net/qq_34569497/article/details/94721444

版权

JS高级案例专栏收录该内容

20 篇文章 1 订阅

订阅专栏

实现遮盖层，使一部分区域不可点击编辑等。

1.简易遮罩层一：

<!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>遮罩层（弹窗）</title>
    <style>
    #cover{ 
        position:absolute;left:0px;top:0px;
        background:rgba(0, 0, 0, 0.4);
        width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
        height:100%;
        filter:alpha(opacity=60);  /*设置透明度为60%*/
        opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
        display:none; 
        z-Index:1;  
    }
    #modal{ 
        position:absolute;
        width:500px;
        height:300px;
        top:50%;
        left:50%;
        background-color:#fff;
        display:none;
        cursor:pointer;
        z-Index:2;  
    }
    </style>
</head>
<body>
        <div>显示页面的全部内容
                <div id="opens">打开弹框</div>
        </div>
            <!-- //页面的遮罩层 -->
        <div id="cover"></div>
            <!-- //页面的弹出框 -->
        <div id="modal">
                <div id="closes">关闭弹框</div>
        </div>
        <script>
             var opens = document.querySelector("#opens");
             var closes = document.querySelector("#closes");
             var cover = document.querySelector("#cover");
             var modal = document.querySelector("#modal");
             opens.onclick = function(){
                cover.style.display="block";   //显示遮罩层
                modal.style.display="block";   //显示弹出层
            };
             closes.onclick = function(){
                cover.style.display="none";   //隐藏遮罩层
                modal.style.display="none";   //隐藏弹出层
             };
        </script>
</body>
</html>

结果：

2.div遮罩层二：

可通过点击实现遮罩层，改变div背景色，宽高：

专门写一个div（没有任何内容）做遮罩层，通过绝对定位的层级实现遮罩；
宽度高度设置为100%，这样才能使隐藏背景层覆盖原页面。
设置透明度为0.3；
（兼容IE）非IE浏览器下设置透明度为30；

<!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>揉捏DIV</title>
    <style>
        ul,li { margin:0; padding: 0; }
        #wrap { position: absolute; z-index: 1;}
        h1 { display: inline; } 
        .set_btn { background: red; border: none; width:100px; height: 30px; color: white; font-size: 16px; }
        #box { width:100px; height: 100px; border: 4px solid black; margin-top: 10px; background: white; }   
        /* 专门写一个div做遮罩层，通过绝对定位的层级实现遮罩 */
        /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/ 
        /*设置透明度为60%*/
        /*非IE浏览器下设置透明度为60%*/
        #cover { position:absolute; left:0px; top:0px; background:#747374; width:100%; height:100%; filter:alpha(opacity=60); opacity:0.3; display:none; z-index:1; }

        #mask { display: none; width:300px; height: 240px; background: white; border: 10px solid gainsboro; position: absolute; z-index: 2; left:40%; top:40%; }
        
        #mask ul { width:300px; height: 180px; padding-top: 10px; }
        #mask li { list-style: none; height: 60px; padding-left: 10px; }
        #mask label { display: inline-block; width: 120px; }
        #mask span { display: inline-block; width: 40px; height: 40px; line-height: 40px; background: gainsboro; text-align: center; border: 1px solid gray;  } 
        #mask .title .red { background: red; }
        #mask .title .yellow { background: yellow; }
        #mask .title .blue { background: blue; }
        #mask input { background: #3f379e; border: none; color: white; width: 50px; height: 20px; text-align: center; }
        #mask .btn_div { margin: 0 auto; width: 106px;}
    </style>
</head>
<body>
    <div id="wrap">
        <h1>请为下面DIV设置样式：</h1>
        <!-- <input class="set_btn" type="button" value="点击设置"/> -->
        <button class="set_btn">点击设置</button>
        <div id="box"></div>
    </div>
    <div id="cover"></div>
    <div id="mask">
        <ul>
            <li class="title">
                <label>请选择背景色：</label>
                <span class="red">红</span>
                <span class="yellow">黄</span>
                <span class="blue">蓝</span>
            </li>
            <li>
                <label>请选择宽(px)：</label>
                <span class="w200">200</span>
                <span class="w300">300</span>
                <span class="w400">400</span>
            </li>
            <li>
                <label>请选择高(px)：</label>
                <span class="h200">200</span>
                <span class="h300">300</span>
                <span class="h400">400</span>
            </li>    
        </ul>
        <div class="btn_div">
            <input class="reset_btn" type="button" value="恢复"/>
            <input class="fix_btn" type="button" value="确定"/>
        </div>
</div>
    <script>
        //弹出遮罩层
        var cover = document.querySelector("#cover");
        var set_btn = document.querySelector(".set_btn");
        var mask = document.querySelector("#mask");
        var box = document.querySelector("#box");
        set_btn.onclick = function(){
            cover.style.display="block";//弹出层
            mask.style.display="block";//弹出窗
        };
        //隐藏遮罩层
        var reset_btn = document.querySelector(".reset_btn");
        var fix_btn = document.querySelector(".fix_btn");
        reset_btn.onclick = function(){
            cover.style.display="none";//弹出层
            mask.style.display="none";//弹出窗
            box.style.cssText = "width:100px; height: 100px; border: 4px solid black; margin-top: 10px; background: white; ";

        };
        fix_btn.onclick = function(){
            cover.style.display="none";//弹出层
            mask.style.display="none";//弹出窗
        };

        //点击红黄蓝更改box背景色
        var red = document.querySelector(".red");
        var yellow = document.querySelector(".yellow");
        var blue = document.querySelector(".blue");
        red.onclick = function(){
            box.style.background = "red";
        };
        yellow.onclick = function(){
            box.style.background = "yellow";
        };
        blue.onclick = function(){
            box.style.background = "blue";
        };
        //点击宽高对应更改box宽高
        var w200 = document.querySelector(".w200");
        var w300 = document.querySelector(".w300");
        var w400 = document.querySelector(".w400");
        var h200 = document.querySelector(".h200");
        var h300 = document.querySelector(".h300");
        var h400 = document.querySelector(".h400");
        w200.onclick = function(){
            box.style.width = "200px";
        };
        w300.onclick = function(){
            box.style.width = "300px";
        };
        w400.onclick = function(){
            box.style.width = "400px";
        };
        h200.onclick = function(){
            box.style.height = "200px";
        };
        h300.onclick = function(){
            box.style.height = "300px";
        };
        h400.onclick = function(){
            box.style.height = "400px";
        };

    </script>
</body>
</html>

结果：

Jyann~

关注

6
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
div遮罩层

实现遮盖层，使一部分区域不可点击编辑等。1.简易遮罩层一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, i...
复制链接

扫一扫