w***@163.com
w***@163.com
  • 发布:2017-09-04 09:31
  • 更新:2017-11-07 21:22
  • 阅读:2626

popover遮罩问题

分类:MUI

在使用弹出层的时候,hello mui的demo中没有看到它的遮罩效果是如何创建的,但是就是有遮罩效果,把它代码复制到我代码中,弹出层的效果是有了,但是没有遮罩效果,不知道是为什么,后面自己在点击按钮的时候创建一个遮罩层,然后让弹出层覆盖在遮罩之上,这样达到了我想要的效果,但是为什么遮罩下面的页面还是可以点到(遮罩下是一个列表页面,在弹出层及遮罩存在的情况下可以上下滑动列表),不知道是什么问题,希望遇到过这种问题的帮忙解答下,感谢!!!!

2017-09-04 09:31 负责人:无 分享
已邀请:
逗逗水

逗逗水

可以给下层列表页加个属性: z-index = -1

1***@qq.com

1***@qq.com - 90hou1

被遮罩的内层页面,可以滑动,但是不触发事件,也是可以的。

4***@qq.com

4***@qq.com

求这部分遮罩的js部分代码。。。

  • w***@163.com (作者)

    //搜索功能

    $('.search_b').click(function(){


                    var modile=$('#modile').val();  
    if(!modile){
    mui.alert('请输入搜索的手机号');
    return;
    }
    var URL="https://sys.ibike365.cn";
    $('.mui-input-group').fadeOut();
    document.querySelector('.mui-backdrop').style.display='none';
    $.ajax({
    type: "post",
    url : URL+"/m?xwl=ibike365/webapi/webAppMemberShow?projectId="+projectId,
    dataType:'json',
    data: {
    mobile: modile
    },
    success: function(data){
    console.log(JSON.stringify(data));
    $("#left").removeClass('mui-action-back');
    $('#left').click(function(){
    window.location.reload();
    });
    $('.hide').css('display','none');
    var dat=data.data.pageData[0];
    var table = document.body.querySelector('.show');
    var li = document.createElement('li');
    if(dat.scanFlag){
    dat.scanFlag='打开';
    }else{
    dat.scanFlag='关闭';
    }
    if(dat.mobile==undefined){
    dat.mobile='无';
    }
    if(dat.accountState==0){
    dat.accountState='失效';
    }else if(dat.accountState==1){
    dat.accountState='正常';
    }else if(dat.accountState==2){
    dat.accountState='欠费';
    }
    li.className = 'mui-table-view-cell mui-media mui-collapse';
    li.innerHTML =
    '<p>'+
    '<img src="images/user.png" alt="" class="mui-pull-left"/>'+
    '<span id="u_name">'+dat.realName+'</span>'+
    '<span id="uid" style="display:none">'+dat.id+'</span>'+
    '<span class="mui-pull-right" id="stats">'+dat.accountState+'</span>'+
    '</p>'+
    '<p>电话:<span class="ph">'+dat.mobile+'</span></p>'+
    '<p>押金:<span class="ya">'+dat.accountDeposit+'</span>'+
    '<span class="mui-pull-right yu">余额:<b>'+dat.accountBalance+'</b></span>'+
    '</p>'+
    '<p>用车数量:<span id="u_num">'+dat.usedcount+'</span>辆<span class="mui-pull-right open">'+dat.scanFlag+'</span></p>';
    //下拉刷新,新纪录插到最前面;
    table.insertBefore(li, table.lastChild);
    },
    error:function(error){
    console.log(JSON.stringify(error));
    }
    });
    });

    你自己格式化一下,我这里是点击了搜索之后弹出的遮罩,这里是搜索的那部分js代码

    2017-11-08 14:46

该问题目前已经被锁定, 无法添加新回复