Jquery+CSS实现遮罩效果

JavaScript:

(function ($) {
    $.fn.ShowMask = function (options) {
        var defaults = {
            top: 150,
            left: 200
        }
        var options = $.extend(defaults, options);
        $("html").append('<div id="ui-mask"></div><div id="ui-mask-div" style="z-index: 99999;position: fixed;top:' + options.top + 'px;left:' + options.left + 'px;"><img src="Images/ui-loading.gif" alt="" /><span>操作正在进行中，请耐心等待......</span></div>')
        _this_ = $("#ui-mask");

        _this_.height($(document).height())
        _this_.show();
    };
    $.fn.HideMask = function (options) {
        _this_ = $("#ui-mask");
        _this_.remove();
    };
})(jQuery);

CSS:

#ui-mask
        {
            background-color: #666;
            position: absolute;
            z-index: 9999;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
        }
        #ui-mask-div img
        {
            width: 50px;
            height: 50px;
            float: left;
        }
        #ui-mask-div span
        {
            height: 50px;
            line-height: 50px;
            display: block;
            float: left;
            color: Red;
            font-weight: bold;
            margin-left: 5px;
        }

JavaScript调用：

function btn_save()
{
    $(this).ShowMask();
    $.post('url',null,function(d,s){
        $(this).HideMask();
    });
}

大家试试吧！