JQuery 代码
- 只需要在需要显示遮罩层的时候,调用 showMask方法,不再不需要遮罩层时,调用 hideMask进行移除即可
/**
* 显示遮罩层
* 动态为body追加元素进行遮罩
*/
function showMask() {
var showMaskJQ = $("<div class='showMaskDiv'></div>");
showMaskJQ.appendTo("body");
}
/**
* 动态移除遮罩层
*/
function hideMask() {
$(".showMaskDiv").remove();
}
CSS 样式
/*遮罩层样式,基于body元素进程绝对定位,阴影铺满整个body*/
.showMaskDiv {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(10, 10, 10, 0.5);
}