实现遮盖层,使一部分区域不可点击编辑等。
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>
结果: