前几天写了个防穿透的模态框。 Modal模态框的防穿透问题,模态框弹出后,禁止body滑动事件
但是今天上线前测试,用Android4.0以下的手机测试时,点击模态框的时候还是出现了穿透,好比 b
是模态框上的按钮,a
是下层页面的按钮。当点击 b
的时候, a
被触发了。同事说这种问题不用改了,可能觉得身边使用的人少了,没那个必要了,我还是在网上搜了下解决办法,找到了,虽然说很粗暴,但我测了下,的确解决了。很好~~~
是这样的,我在插件中加了
<div class="preventClick"></div>
也就是 弹窗出现的时候,这个弹层也出现,是下面这种结构
.preventClick {
width:100%;
height:100%;
position:absolute;
z-index:1000;
top:0;
left:0;
display:none;
}
在生成弹窗前,让 preventClick
显示出来。
function onDeviceReady() { // 安卓4.2下fastclick触发两次
setTimeout(function(){ $('.preventClick').hide(); }, 300);
}
$('.preventClick').show(); // 安卓4.0防穿透遮罩层
PopHelper.pop({
title : "温馨提示",
content : str,
confirmBtn : "知道了",
callbacks : [ function() {
hideLoading();
var data = $(e.target).data("str");
order(data);
},function(){
hideLoading();
onDeviceReady(); // 300ms后隐藏遮罩层
$(".rf-dialog").remove(); //在插件函数里,其实是有这句的,但是IOS10.3.2却有问题,所以在这里再添加上
} ]
});
经过测试,没有穿透点击了,实现了。
学习于 《 Fastclick 导致click事件触发两次的问题 》