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

最新推荐文章于 2021-05-31 12:23:02 发布

转载最新推荐文章于 2021-05-31 12:23:02 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lengyue0030/p/6478039.html

本文介绍了一种在数据量不确定情况下动态调整遮罩层尺寸的方法。通过使用JavaScript判断页面高度并调整遮罩层大小，确保在不同数据量下都能正确显示。

遮罩层的实现

.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的高度不准确；

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

转载于:https://www.cnblogs.com/lengyue0030/p/6478039.html