jQuery遮罩层插件

2023-08-18 11:26:52

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

$.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 = $('<div class="rhui-mask" style="position:fixed;"></div>');

			$content = $('<div class="rhui-mask-content" style="position:fixed;">' + message + '</div>');

		} else {

			$overlay = $('<div class="rhui-mask"></div>');

			$content = $('<div class="rhui-mask-content">' + message + '</div>');

		}

		$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;

}

效果如图所看到的

jQuery遮罩层插件

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

页面调用完整代码

<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>网页遮罩层的实现</title>

	<style type="text/css">

		/* 遮罩层样式 */

		.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;

		}

	</style>

	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>

	<script type="text/javascript">

		$.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 = $('<div class="rhui-mask" style="position:fixed;"></div>');

					$content = $('<div class="rhui-mask-content" style="position:fixed;">' + message + '</div>');

				} else {

					$overlay = $('<div class="rhui-mask"></div>');

					$content = $('<div class="rhui-mask-content">' + message + '</div>');

				}

				$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');

			}

		});

	</script>

</head>

<body>

	<div id="div" style="width:600px;height:300px;margin:10px;border:1px solid red;"></div>

	<script type="text/javascript">

		$(function () {

			//遮盖整个页面

			//仅仅要对window、document和body使用遮罩层。都会遮盖整个页面

			//$(window).mask();

			//$(window).unmask(); 取消遮罩

			//遮盖div

			$('#div').mask('载入中，请稍候。。

。');

		});

	</script>

</body>

</html>
上一篇：MVC实战之排球计分（一）—— 需求分析与数据库设计


下一篇：函数——es6函数扩展(二)