一个简单实现的遮罩层

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