css +js实现遮障层效果

 1 /*
*使用说明，当需要用户等待时可直接在等待的方法中输入以下方法
*IsShow：0不显示 1显示 其他数字为修改样式如当改变窗口大小时遮障层自动适用窗口大小
*/
$(window).scroll(function () { changeMasker("3") }).resize(function () { changeMasker("3") });
function changeMasker(IsShow) {

    var $windowWidth = $(window).width();
    var $windowHeight = $(window).height();
    var $maskerBackground = $("#maskerBackground");
    var $maskerText;
    if ($maskerBackground.length <= 0) {
        var maskerHtml = "<div id='masker' style='display:none;'><div id='maskerBackground' style='background-color: gray; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.3; opacity: 0.8; z-index: 2; position: absolute; left: 0px; top: 0px;'>" +
                   "</div><div id='maskerText' style='position: absolute; width: 250px; height: 185px; line-height: 185px; z-index: 3; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.3; opacity: 0.8; background-image:url(../Contents/Images/loading.gif); '> </div></div>";
        $("div:last").after($(maskerHtml));
        $maskerBackground = $("#maskerBackground");
        $maskerText = $("#maskerText");
    }

    if (IsShow == "1") $("#masker").show();
    else if (IsShow == "0") $("#masker").hide();

    $maskerBackground.css({ 'width': $windowWidth, 'height': $windowHeight + $(document).scrollTop() });
    $maskerText.css({
        'width': $maskerText.width(), 'height': $maskerText.height(),
        'top': ($windowHeight - $maskerText.height()) / 2 + $(document).scrollTop(), 'left': ($windowWidth - $maskerText.width()) / 2
    });
}