在网页上经常遇到需要等待很久的操作，比如导出报表等。为了预防用户点击其他操作或者多次点击同个功能，需要用遮罩层把页面或者操作区盖住，防止用户进行下一步操作，同时可以提高界面友好度，让用户知道操作正在执行。
$.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></div>'); $content = $('<div>' + message + '</div>'); } else { $overlay = $('<div></div>'); $content = $('<div>' + 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></div>'); $content = $('<div>' + message + '</div>'); } else { $overlay = $('<div></div>'); $content = $('<div>' + 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"></div> <script type="text/javascript"> $(function () { //遮盖整个页面 //只要对window、document和body使用遮罩层，都会遮盖整个页面 //$(window).mask(); //$(window).unmask(); 取消遮罩 //遮盖div $('#div').mask('加载中，请稍候。。。'); }); </script> </body> </html>
【使用jQuery制作Web页面遮罩层插件的实例教程】相关文章：
★ JavaScript使用addEventListener添加事件监听用法实例