javascript遮罩层编写

遮罩层JS代码

(function(a) {
	a.fn.mask = function(c, b) {
		a(this).each(function() {
			if (b !== undefined && b > 0) {
				var d = a(this);
				d.data("_mask_timeout", setTimeout(function() {
					a.maskElement(d, c)
				}, b))
			} else {
				a.maskElement(a(this), c)
			}
		})
	};
	a.fn.unmask = function() {
		a(this).each(function() {
			a.unmaskElement(a(this))
		})
	};
	a.fn.isMasked = function() {
		return this.hasClass("masked")
	};
	a.maskElement = function(d, c) {
		if (d.data("_mask_timeout") !== undefined) {
			clearTimeout(d.data("_mask_timeout"));
			d.removeData("_mask_timeout")
		}
		if (d.isMasked()) {
			a.unmaskElement(d)
		}
		if (d.css("position") == "static") {
			d.addClass("masked-relative")
		}
		d.addClass("masked");
		var e = a('<div class="loadmask"></div>');
		if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
			e.height(d.height() + parseInt(d.css("padding-top"))
					+ parseInt(d.css("padding-bottom")));
			e.width(d.width() + parseInt(d.css("padding-left"))
					+ parseInt(d.css("padding-right")))
		}
		if (navigator.userAgent.toLowerCase().indexOf("msie 6") > -1) {
			d.find("select").addClass("masked-hidden")
		}
		d.append(e);
		if (c !== undefined) {
			var b = a('<div class="loadmask-msg" style="display:none;"></div>');
			b.append("<div>" + c + "</div>");
			d.append(b);
			b.css("top", Math.round(d.height()
					/ 2
					- (b.height() - parseInt(b.css("padding-top")) - parseInt(b
							.css("padding-bottom"))) / 2)
					+ "px");
			b.css("left", Math.round(d.width()
					/ 2
					- (b.width() - parseInt(b.css("padding-left")) - parseInt(b
							.css("padding-right"))) / 2)
					+ "px");
			b.show()
		}
	};
	a.unmaskElement = function(b) {
		if (b.data("_mask_timeout") !== undefined) {
			clearTimeout(b.data("_mask_timeout"));
			b.removeData("_mask_timeout")
		}
		b.find(".loadmask-msg,.loadmask").remove();
		b.removeClass("masked");
		b.removeClass("masked-relative");
		b.find("select").removeClass("masked-hidden")
	}
})(jQuery);

遮罩层CSS

.loadmask {
    z-index: 100;
    position: absolute;
    top:0;
    left:0;
    -moz-opacity: 0.5;
    opacity: .50;
    filter: alpha(opacity=50);
    background-color: #CCC;
    width: 100%;
    height: 100%;
    zoom: 1;
}
.loadmask-msg {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px solid #80AAE0;
    border-radius: 4px 4px 4px 4px;
    display: none;
    height: 32px;
    left: 50%;
    margin-left: -54px;
    margin-top: -19px;
    overflow: hidden;
    padding: 2px;
    position: absolute;
    top: 50%;
    width: 112px;
    z-index: 101;
}
.loadmask-msg div {
    background: #fbfbfb url('images/loading.gif') no-repeat 5px 9px;
    color: #444444;
    display: block;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    padding-left: 32px;
}
.masked {
    overflow: hidden !important;
}
.masked-relative {
    position: relative !important;
}
.masked-hidden {
    visibility: hidden !important;
}

把这两个文件导入页面 然后调用 $("body").mask("正在加载....");表示在body里面加载遮罩层