Jquery+CSS实现遮罩效果

JavaScript:

(function ($) {
    $.fn.ShowMask = function (options) {
        var defaults = {
            top: 150,
            left: 200
        }
        var options = $.extend(defaults, options);
        $("html").append('<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();
    });
}

大家试试吧！