版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/fjxcsdn/article/details/85345181
蒙板层，无非就是调用一个空白的DIV界面，遮挡窗体，无法对窗体下面的东西控件进行操作。
工具：一个空白的div标签，使得覆盖整个窗体，例如下面的mDiv
CSS属性：css设置不透明度opacity
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="script/jquery-3.3.1.min.js"></script>
<style>
#mDiv {
position: absolute; /*绝对定位*/
width:1024px;
height:768px;
left: 0px;
top: 0px;
background-color: black;
display: none;
opacity: 0.1; /*设置不透明度，相当于磨砂一样，可以看见下面的窗体，但是无法进行操作*/
}
#xDiv {
position: absolute;
width: 300px;
height: 100px;
border: 1px solid red;
background-color: #e7e7e7;
display: none;
}
</style>
<script>
$(function () {
$('#btnShow').click(function () {
$('#mDiv').css('display', 'block');
$('#xDiv').css('display', 'block');
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="现身" />
<div id="mDiv"> </div>
<div id="xDiv" >好嗨哦，感觉人生已经到达了巅峰，感觉人生已经达到了高潮。</div>
</body>
</html>效果展示：在点击现身按钮以前，浏览器界面是白色，点击现身以后，窗体变为灰色，这是设置透明度的原因，设置了一个蒙板层，将当前的信息与按钮发生了分离。可以对控件以及窗体进行了隔离。用户体验将会是意向不到了。
