版权声明:本文为博主原创文章,未经博主允许不得转载。 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>
效果展示:在点击现身按钮以前,浏览器界面是白色,点击现身以后,窗体变为灰色,这是设置透明度的原因,设置了一个蒙板层,将当前的信息与按钮发生了分离。可以对控件以及窗体进行了隔离。用户体验将会是意向不到了。