1 /** 2 * mask - 遮罩 3 * 4 * 5 * Requires: 6 * 依赖: 7 * jquery.js 8 * 9 * How to use: 10 * 使用方法: 11 * $.showMask(msg); 12 * $.hideMask(); 13 * 14 css样式: 15 16 #ui-mask { 17 background-color: #ccc; 18 position: absolute; 19 z-index: 9999; 20 left: 0; 21 top: 0; 22 display: none; 23 100%; 24 height: 100%; 25 opacity: 0.2; 26 filter: alpha(opacity=20); 27 -moz-opacity: 0.2; 28 } 29 30 #ui-mask-div { 31 font-size: 14px;; 32 font-family: Verdana, 微软雅黑, 新宋体, Tahoma; 33 z-index: 99999; 34 position: fixed; 35 padding: 10px 5px 10px 30px; 36 border-color: #D4D4D4; 37 top: 50%; 38 auto; 39 border- 2px; 40 border-style: solid; 41 background: #ffffff url('../loading.gif') no-repeat scroll 5px center; 42 } 43 * 44 * 45 */ 46 (function($) { 47 48 $.fn.showMask = function(msg) { 49 return $.showMask(msg); 50 } 51 52 $.fn.hideMask = function() { 53 this.hideMask(); 54 } 55 56 $.showMask = function(msg) { 57 $("html").append('<div id="ui-mask"></div><div id="ui-mask-div">' + msg + '</div>'); 58 _this_ = $("#ui-mask"); 59 _this_.height($(document).height()); 60 this.adjust(); 61 _this_.css('display', 'block'); 62 }; 63 64 $.hideMask = function() { 65 $("#ui-mask").remove(); 66 $("#ui-mask-div").remove(); 67 }; 68 69 $.adjust = function() { 70 var w = $("#ui-mask").width(); 71 var div = $("#ui-mask-div").css('width').replace('px', ''); 72 73 var l = (w - div )/ 2; 74 if (l < 0) 75 l = 0; 76 77 $("#ui-mask-div").css({ 78 left : l + 'px' 79 }); 80 } 81 82 })(jQuery);