在網頁上經常遇到需要等待很久的操作，比如導出報表等。為了預防用戶點擊其他操作或者多次點擊同個功能，需要用遮罩層把頁面或者操作區蓋住，防止用戶進行下一步操作，同時可以提高界面友好度，讓用戶知道操作正在執行。
$.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> 新聞熱點
疑難解答
