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

遮罩层的实现

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

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

时间: 2024-10-26 13:50:32

移动端遮罩层,内容大小改变动态大小的相关文章

解决移动端遮罩层无法覆盖全部页面问题

今天在做移动端项目的时候遇到遮罩层效果,按照以往的PC端我直接给同级遮罩层100%  给完之后测试看似完美但... 这就尴尬了.... 之后查阅了相关资料得知这里有个方法可以解决这个问题那就是“禁止全局滚动” 里面用的touch事件可参考 HTML5移动端触摸事件 document.addEventListaner('touchmove',stopTouchMove,false); //当手在屏幕上移动的时候执行stopTouchMove函数(阻止默认事件) //这个可以用在当遮罩层弹出的话执行

移动端遮罩层,放在页面最上面,并且不能滚动

点击弹出遮罩层,需要规定到页面最上面,并且不让其滚动: 点击添加一个类: .maskstyle{ width:100%; height:100%; position:fixed; overflow:hidden; } .mask{ diaplay:none; poaition:acsolute; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,.3); z-index:2; } js控制显示隐藏 显示: $(".mask"

java javaScript实现遮罩层 动态加载

通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关代码,只显示可以出现功能的最少代码). 第一:效果图为 第二:实现如上效果的代码为 1:遮罩层css代码 <style type="text/css">#load{position:fixed; top: 0px; right:0px; bottom:0px;filter: a

利用FrameLayout实现遮罩层

利用FrameLayout实现遮罩层,基本原理是动态的加载一个Layout 首先是布局文件 activity_validate_phone.xml? ?根布局采用FramLayout 然后是Activity ?private ImageView infoOperatingIV; private ImageView imageView; private FrameLayout layout; 然后在按钮的监听函数中添加layout 注意 imageView声明的时候: 清除的时候使用layout.

在jQuery环境下制作轻巧遮罩层

遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作. 制作原理很简单:1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景(重点是捕获内容div的大小位置)4设置点击触发按钮遮罩层背景内容同时显示或隐藏. 具体代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu

jQuery遮罩层插件

在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =

清除移动端网站点击a标签时闪现的边框或遮罩层(CSS)

  在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为了告诉用户已点击了该元素,提升用户体验,但有的时候你会觉得这些特效看起来很别扭,就想着清除它,其实这很简单,只要加上一句CSS就行了. 清除所有a标签在点击时出现的特效: a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}

移动端 js 弹出层内容滚动的时候,不影响body的滚动条处理

如标题所示,这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发,自己重写了一下代码 效果图: 代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport&quo

UGUI动态改变Grid大小

工作中经常需要用到Grid,动态添加物体时,就需要动态改变Grid大小.直接写好脚本,以后COPY. using UnityEngine;using System.Collections;using UnityEngine.UI;using System; public class Colve_UpdateGridShow : MonoBehaviour { public GridLayoutGroup m_Grid; private Vector2 cellVec2; private Vect