移动端遮罩层，内容大小改变动态大小

Posted 2020-09-01 lengyue0030

遮罩层的实现

.mask{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:rgba(0,0,0,.3);
    z-index:1000;
　　display:none;
}

　解释：如果想在某个区域设置遮罩层，就把.mask放在某个区域的div下；根据自己的需求设置宽高，定位也要适当删减修改；

　　　　层级就根据自己需求设置大小；

本人遇到的情况是数据不固定，遮罩层大小不固定；

数据多的情况下遮罩层正常遮罩，如果没数据或数据少，遮罩层在下半部就不显示了；

遮罩层不能设置固定宽高，要根据数据多少而定，因为这个是移动端，tab栏不是固定的，会随页面滚动；

解决方案：

　　使用js动态控制遮罩层复盒子大小；

$(".tab").click(function(){
    if($("body").height()<$(window).height()){
       $("body").css("height",$(window).height());
    }else{
          $("body").css("height","auto"); 
    }   
})       

　　因为数据是动态加载的，判断要放在click里面判断，否则获取body的高度不准确；

以上内容仅为个人总结，如有错误请指出；谢绝复制转发；