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 = $('<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;
}

效果如图所示

页面调用完整代码

<!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>

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-12-08 06:41:14

jQuery遮罩层插件的相关文章

jquery遮罩层

(function () { //遮罩层实现 zhe zhao ceng kexb 2016.2.24 $.extend($.fn, { mask: function (msg, maskDivClass) { this.unmask(); // 参数 var op = { opacity: 0.8, z: 10000, bgcolor: '#ccc' }; var original = $(document.body); var position = { top: 0, left: 0 };

jquery 遮罩层显示img

如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶层添加dom对象,用来显示信息,默认隐藏,需要时在iframe中调用,宽高设置为100%. 实现如下: //遮罩层 .showmask { position: fixed; z-index: 99; width: 100%; height: 100%; background-color: silve

jquery遮罩层的实现

首先,实际上新的窗口并不是创建出来再弹出来,而是将原本隐藏的重新显示出来. html结构如下: <div> <!-->页面内容<--> </div> <div class="mask"> <!-->蒙版<--> </div> <div class="toDisplay"> <!-->弹出层<--> </div> 点击Butt

JQuery 遮罩层弹窗

var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0,0,0,0.3); width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 9999;\">"; str += "<div id=\"tanchuang\"

jQuery弹出遮罩层效果完整示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3

jquery实现div遮罩层

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

简单实用的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件.该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用. 在线预览   源码下载 使用方法 使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件. 1 2 <script src="js/jquery.min.js"></script> <script src="js/ns.hover.m