layer.open多次触发,遮罩层覆盖content的解决办法

1.在移动端中点击事件会有300毫秒的延时,解决办法是添加fastclick.js

2.减少点击触发事件

var Initialization=true;触发点击事件的时候判断Initialization是否为true。当layer.open执行成功的时候把Initialization=false;这样减少了页面出错。(但是第一次触发点击事件的时候,多次点击还是会有bug的);

代码如下:

function CommandState(argument,ev){
var oEvent=window.event||arguments.callee.caller.arguments[0];
if(Initialization==true){
$.ajax({
"url": CommandOrderView,
"data":{
"action":RobotOrder+"2",
"TaskTd":argument
},
"type":"post",
success: function(data){
Initialization=false;
var tan = layer.open({
type:1,
title: '任务信息',
area:['320px','460px'],//宽高
offset: '50px',
fixed: false,
anim: 1,
content: $("#ListDialog"),
success: function(layero,index){
$("#contain .nav-right").css({position:"unset",margin: "0 0 0 "+localStorage.leftwidth+"px",transition: "0s"}); //如果该父级原来没有设置相对定位,那么在追加该弹层之前需要设置
Initialization=true;
var LayuiLayerShadeLenght=$(".layui-layer-shade").length;
if(LayuiLayerShadeLenght>1){
$(".layui-layer-shade").css({"z-index":"9999"});
}
},
btn:['编辑','删除','取消'],
yes:function(index){
window.location.href=CommandEditCom+"?id="+argument+"";
},
btn2:function(){
layer.alert('你确定要删除Order #'+argument+'任务吗?', {
skin: 'layui-layer-molv'
,anim:1
,icon:8
,time:0
,closeBtn: 0
,btn:['确定','取消']
,btn1:function(index){
$.ajax({
"url": CommandOrderView,
"type": "post",
"data": {
"action": "TaskDelete",
"TaskTd":argument,
"RobotState":data.Order.ordre_state
},
success: function(data) {
if(data.state==200){
if(data.msg=="修改成功"){
layer.msg("删除成功");
}else if(data.msg=="删除成功"){
// layer.msg('删除成功!');
}
layer.close(index);
$(".RobotsAggregate"+argument).parent().hide();
$("#contain .nav-right").css({position:"fixed",margin: "0",transition: "0s"});
}
},
error: function(data){console.log("删除机器人");}
});
},btn2:function(){
layer.msg('已取消!');
$("#contain .nav-right").css({position:"fixed",margin: "0",transition: "0s"});
}
});
},
end:function(){
$("#contain .nav-right").css({position:"fixed",margin: "0",transition: "0s"});
$(".layui-layer-shade").remove();
}
});
},
error:function(data){
console.log("显示机器人执行任务正在运行的状态");
}
});
}
}

3.根据上面的代码所示:当layer.open执行成功的时候,获取遮罩层的数量,和数量大于1的时候,把遮罩层z-index的属性值小于content连接弹出框的属性,确保,content连接的标签在遮罩层的上面,如下代码所示

var LayuiLayerShadeLenght=$(".layui-layer-shade").length;
 if(LayuiLayerShadeLenght>1){
      $(".layui-layer-shade").css({"z-index":"9999"});
  }

4.layer.open关闭的时候,默认只关闭一个遮罩层,但是多次触发会出现多个遮罩层,虽然content连接的标签可以正常显示,但是,关闭的时候只能关闭一个。剩下的遮罩层会影响页面操作。解决办法是,当关闭content连接的标签是,用jquery把所有的遮罩层移除即可。

end:function(){
     $(".layui-layer-shade").remove();
}
原文地址:https://www.cnblogs.com/wsw8384/p/8963944.html