<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
#div1{
position: fixed;
z-index: 1000;
width: 100%;
background-color: #efeef0;
height: 800px;
}
#div2{
background-color: #b7e692;
opacity: 0.2;/* 设置透明度 */
position: fixed; /* 定位 */
z-index: 1001; /* 定位以后用它来控制层级*/
top:0;
left: 0;
right: 0;
bottom: 0; /* 目的是让透明层 布满整个屏幕 */
width: 100%;
}
#div3{
height: 200px;
width: 400px;
background-color: #f0687f;
position: absolute; /* 坐标定位*/
z-index: 1002;
top: 50%;
left:50%;
margin-top: -100px; /* 50% 不能实现居中，这样做细微控制*/
margin-left: -200px;
}
.hid{
display: none;
}
</style>
</head>
<body>
<div id="div1">
<input type="button" value="aaa" onclick="show()">
</div>
<div id="div2" class="hid"></div>
<div id="div3" class="hid">
<input type="button" value="取消" onclick="cancel()">
</div>
<script>
function show() {
var ele=document.getElementById("div2");
ele.classList.remove("hid")
var ele1=document.getElementById("div3");
ele1.classList.remove("hid")
}
function cancel() {
var ele=document.getElementById("div3");
var ele1=document.getElementById("div2");
ele.classList.add("hid")
ele1.classList.add("hid")
}
</script>
</body>
</html>
来源：CSDN
作者：9Khan
链接：https://blog.csdn.net/weixin_45943458/article/details/103830586