jQuery遮罩层插件

在网页上经常遇到需要等待很久的操作，比如导出报表等。为了预防用户点击其他操作或者多次点击同个功能，需要用遮罩层把页面或者操作区盖住，防止用户进行下一步操作，同时可以提高界面友好度，让用户知道操作正在执行。

$.fn.extend({
	/**
	 * 给元素添加遮罩层
	 * @param  message  {String}  [可选]遮罩层显示内容
	 */
	mask: function (message) {
		var $target = this,
			fixed = false,
			targetStatic = true;

		if (Object.prototype.toString.call(message) !== '[object String]' || !message) {
			//如果message为空或者不是字符串，则用默认的消息提示。
			message = '请稍候。。。';
		}

		if ($target.length === 0) {
			$target = $('body');
		} else {
			if ($target.length > 1) {
				$target = $target.first();
			}

			if ($target[0] === window || $target[0] === document) {
				$target = $('body');
			}
		}
		
		if($target[0] === document.body){
			fixed = true;
		}

		//如果目标元素已经有遮罩层，获取遮罩层
		var old = $target.data('rhui.mask');
		if (old) {
			old.$content.html(message);
			center($target, old.$content, fixed);
			return;
		}

		//如果被遮盖的元素是static，把元素改成relative
		if ($target.css('position') === 'static') {
			targetStatic = true;
			$target.css('position', 'relative');
		}

		var $content, $overlay;
		if (fixed) {
			$overlay = $('
');
			$content = $('
' + message + '
');
		} else {
			$overlay = $('
');
			$content = $('
' + message + '
');
		}

		$overlay.appendTo($target);
		$content.appendTo($target);

		//显示遮罩层
		$overlay.show();
		$content.show();

		//让遮罩层居中
		center($target, $content, fixed);

		//把遮罩层信息添加到$target
		$target.data('rhui.mask', {
			fixed: fixed,
			$overlay: $overlay,
			$content: $content,
			targetStatic: targetStatic
		});

		/**
		 * 让遮罩层内容居中显示
		 * @param  $target   被遮盖的元素
		 * @param  $content  遮罩层内容元素
		 * @param  fixed     遮罩层是否固定显示
		 */
		function center($target, $content, fixed) {
			var $window,
				height = $content.outerHeight(true),
				width = $content.outerWidth(true);

			if (fixed) {
				//如果遮罩层固定显示，让遮罩层在window居中
				$window = $(window);
				$content.css({
					left: ($window.width() - width) / 2,
					top: ($window.height() - height) / 2
				});
			} else {
				//让遮罩层在$target中居中
				$content.css({
					left: ($target.width() - width) / 2,
					top: ($target.height() - height) / 2
				});
			}
		}
	},

	/**
	 * 取消遮罩层
	 */
	unmask: function () {
		var $target;

		if (this.length === 0) {
			$target = $('body');
		} else {
			$target = this.first();
			if ($target[0] === window || $target[0] === document) {
				$target = $('body');
			}
		}

		var data = $target.data('rhui.mask');
		if (!data) {
			return;
		}

		//还原目标元素的position属性
		if (data.targetStatic) {
			$target.css('position', 'static');
		}

		data.$overlay.remove();
		data.$content.remove();

		$target.removeData('rhui.mask');
	}
});

插件样式由rhui-mask和rhui-mask-content类控制，rhui-mask是遮罩层样式，rhui-mask-content是遮罩层的提示内容样式。

/* 遮罩层样式 */
.rhui-mask {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9000;
	display: block;
	margin: 0;
	padding: 0;
	border-style: none;
	background-color: #777;
	opacity: 0.3;
	zoom: 1;
	filter: alpha(opacity=30);
}

/* 遮罩层显示内容样式 */
.rhui-mask-content {
	position: absolute;
	z-index: 9999;
	display: block;
	margin: 0;
	padding: 15px 20px;
	border: 2px solid rgb(109, 157, 215);
	background-color: #fff;
	color: blue;
	letter-spacing: 2px;
	font-weight: bold;
	font-size: 15px;
	cursor: wait;
}

效果如图所示

页面调用完整代码