CSS + JQuery 实现遮罩层

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);
}