div遮罩层

时间：2021-09-26 19:21:07

相关推荐

div遮罩层

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

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><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>

结果：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。