在前端界面,有时候触发了某些条件,需要将一些控件(如按钮、跳转链接)设置为不可点击;当达到另外条件后,又可以恢复点击。
一般的做法,都是在具体的页面上,针对特定的控件写对应的方法。
但对于需要修改的地方多的时候,一个个去针对性修改就显得有些低效了。这时候如果有一个公共的方法来调用,一切就显得方便高效许多。
这里提供一个遮罩层的方法,来提供公共的调用。
原理:
设置一个透明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'));