jQuery遮罩插件

mask.js

//遮罩
;(function($){
    $.fn.mask = function(label, delay, loading, bgcolor){
        $(this).each(function() {
            if(loading==null){
                loading=true;
            }
            var bgcolorValue="#cccccc";
            if(bgcolor){
                bgcolorValue=bgcolor;
            }
            if(delay !== undefined && delay > 0 && delay !=null) {
                var element = $(this);
                element.data("_mask_timeout", setTimeout(function() { $.maskElement(element, label ,loading, bgcolorValue)}, delay));
            } else {
                $.maskElement($(this), label, loading, bgcolorValue);
            }
        });
    };

    $.fn.unmask = function(){
        $(this).each(function() {
            $.unmaskElement($(this));
        });
    };

    $.fn.isMasked = function(){
        return this.hasClass("masked");
    };

    $.maskElement = function(element, label,loading ,bgcolor){

        if (element.data("_mask_timeout") !== undefined) {
            clearTimeout(element.data("_mask_timeout"));
            element.removeData("_mask_timeout");
        }

        if(element.isMasked()) {
            $.unmaskElement(element);
        }

        if(element.css("position") == "static") {
            element.addClass("masked-relative");
        }

        element.addClass("masked");

        var maskDiv = $('
');


        maskDiv.css({
            "backgroundColor":bgcolor
        })

        if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
            maskDiv.height(element.height() + parseInt(element.css("padding-top")) + parseInt(element.css("padding-bottom")));
            maskDiv.width(element.width() + parseInt(element.css("padding-left")) + parseInt(element.css("padding-right")));
        }

        if(navigator.userAgent.toLowerCase().indexOf("msie 6") > -1){
            element.find("select").addClass("masked-hidden");
        }

        element.append(maskDiv);
        maskDiv.show();
        if(label !== undefined&&label!=null) {
            var maskMsgDiv = $('
');
            if(loading){
                maskMsgDiv.append('
' + label + '
');
            }
            else{
                maskMsgDiv.append('
' + label + '
');
            }
            element.append(maskMsgDiv);

            maskMsgDiv.css("top", Math.round(element.height() / 2 - (maskMsgDiv.height() - parseInt(maskMsgDiv.css("padding-top")) - parseInt(maskMsgDiv.css("padding-bottom"))) / 2)+"px");
            maskMsgDiv.css("left", Math.round(element.width() / 2 - (maskMsgDiv.width() - parseInt(maskMsgDiv.css("padding-left")) - parseInt(maskMsgDiv.css("padding-right"))) / 2)+"px");

            maskMsgDiv.show();
        }

    };

    $.unmaskElement = function(element){
        if (element.data("_mask_timeout") !== undefined) {
            clearTimeout(element.data("_mask_timeout"));
            element.removeData("_mask_timeout");
        }

        element.find(".loadmask-msg,.loadmask").remove();
        element.removeClass("masked");
        element.removeClass("masked-relative");
        element.find("select").removeClass("masked-hidden");
    };

})(jQuery);

 

loadmask.css

/*mask遮罩*/
.loadmask {
    z-index: 700;
    position: absolute;
    top: 0;
    left: 0;
    -moz-opacity: .4;
    opacity: .40;
    filter: alpha( opacity = 40);
    width:100%;
    height:100%;
    zoom:1;
    display:none;
}.loadmask-msg {
     z-index: 20001;
     position: absolute;
     top: 0;
     left: 0;
     border: 1px solid #6593cf;
     background: #c3daf9;
     padding: 2px;
 }.loadmask-msg .mask_lading {
      padding: 5px 10px 5px 25px;
      background: #fbfbfb url('images/loading3.gif') no-repeat 5px 5px;
      line-height: 16px;
      border: 1px solid #a3bad9;
      color: #222;
      cursor: wait;
  }.loadmask-msg .normal {
       padding: 5px 10px 5px 10px;
       background-color: #fbfbfb;
       line-height: 16px;
       border: 1px solid #a3bad9;
       color: #222;
       display:block;
   }.masked {
        overflow: hidden !important;
    }.masked-relative {
         position: relative !important;
     }.masked-hidden {
          visibility: hidden !important;
      }

 

loading3.gif

使用方法：