zoukankan      html  css  js  c++  java
  • 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();
    }
  • 相关阅读:
    c++,模板函数的定义和使用【初探】
    c++,内联成员函数
    C++,对象成员的访问
    c++,public/protected/private权限修饰符
    c++,static 静态成员变量 / 静态成员函数
    C++,对象的 =赋值 以及 复制构造函数赋值
    Android 的提权(root)原理【转】
    高通LCD的pwm背光驱动
    IP地址的分类——a,b,c 类是如何划分的【转】
    Android分区
  • 原文地址:https://www.cnblogs.com/wsw8384/p/8963944.html
Copyright © 2011-2022 走看看