在上传大图片、修改大量数据、加载大量数据的时候可能会用到一些遮罩层提醒用户等待片刻，一是为了让用户有心理预期，二是为了用遮罩层防止用户反复操作

 1 var MaskUtil = (function () {
 2 
 3     var $mask, $maskMsg;
 4 
 5     var defMsg = '处理中，请稍等O(∩_∩)O ...';
 6 
 7     function init() {
 8         if (!$mask) {
 9             $mask = $("<div class=\"datagrid-mask mymask\"></div>").appendTo(".window");
10         }
11         if (!$maskMsg) {
12             $maskMsg = $("<div class=\"datagrid-mask-msg mymask\">" + defMsg + "</div>")
13                 .appendTo(".window").css({ 'font-size': '12px' });   //这里的.window指的是需要遮罩的容器的选择器，下面的一样。你们可以用你们自己的容器选择器
14         }
15 
16         $mask.css({ width: "100%", height: $(".window").height() });
17 
18         $maskMsg.css({
19             left: ($(".window").outerWidth(true) - 190) / 2, top: ($(".window").height() - 45) / 2,
20         });
21 
22     }
23 
24     return {
25         mask: function (msg) {
26             init();
27             $mask.show();
28             $maskMsg.html(msg || defMsg).show();
29         }
30         , unmask: function () {
31             $mask.hide();
32             $maskMsg.hide();
33         }
34     }
35 
36 }());

效果就是这样：

 

使用方法是，在加载前调用

 MaskUtil.mask();

加载成功后调用

 MaskUtil.unmask();

感谢axe大神的技术支持，原文地址：http://blog.csdn.net/thc1987/article/details/37568609