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

遮罩层的实现

.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