jquery遮罩层实现

在前端界面，有时候触发了某些条件，需要将一些控件（如按钮、跳转链接）设置为不可点击；当达到另外条件后，又可以恢复点击。
一般的做法，都是在具体的页面上，针对特定的控件写对应的方法。
但对于需要修改的地方多的时候，一个个去针对性修改就显得有些低效了。这时候如果有一个公共的方法来调用，一切就显得方便高效许多。

这里提供一个遮罩层的方法，来提供公共的调用。

原理：
设置一个透明div层，置于需要修改的控件对象的上一层，即覆盖住需要修改的控件的点击范围。以使得当用户想要点击控件时，实际上是点击到了控件上一层的这个div层，从而阻隔了用户对于控件的直接点击。

编写遮罩层的逻辑：
在需要遮住的元素之上，wrap一个透明div层，这个div层的z-index较大（才能浮在元素之上），将元素包裹住。

注：wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。如：$(selector).wrap(wrapper)

实现代码：

//启动遮罩
function MaskIt(obj){
     var hoverdiv = '<div class="divMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; opacity: 0; filter: alpha(opacity=0);z-index:5;"></div>';
    $(obj).wrap('<div class="position:relative;"></div>');
    $(obj).before(hoverdiv);
    $(obj).data("mask",true);
}

//解除遮罩
function UnMaskIt(obj){
    if($(obj).data("mask")==true){
        $(obj).parent().find(".divMask").remove();
        $(obj).unwrap();
        $(obj).data("mask",false);
    }
    $(obj).data("mask",false);
}

调用例子：

//当前有标签： 
<button id="btn1">按钮</button>
//调用遮罩
MaskIt($('#btn1'));
//取消遮罩
UnMaskIt($('#btn1'));