mask遮罩蒙层使用通常的写法的bug

通常写法pug

.mask

通常写法css

.mask{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/*移动端*/
background: rgba(0,0,0,.5);
/*ie*/
background: #000;
opacity: 0.5;
filter: alpha(opacity = 0.5);
}

  

但是这种适用于内容小于屏幕高度的,如果内容撑出屏幕,那么css自动计算的mask的高度就有问题了,
比如这样,
正面看很ok
但是轻轻上滑。。
嘚!露怯了!

起初想的解决是,mask出现的时候不让页面滚动?
倒也不是不可以,但是万一人家刚好移动了一点点再点击调出蒙层呢?不也还是露怯么!属于治标不治本型的。

那就只能从高度上下手了
刚好页面中有计算可视化高度的,
我给mask设置style的行内高度为可视区域高度,发现也不行

那设置成body的scrollHeight呢?也不行
不知道是不是css是rem而我设置px的原因

反正都没解决

但是js动态设置高度后,我无意识的将position:absolute;改成了position:fixed;
妈耶效果好了!

起初还以为是js起作用了,还想小小开心庆祝下我的机智
后来转念一想,高度设置了下边也是露一块啊,为什么蒙层却完美贴合了呢?!
所以肯定另有玄机
我就把js删掉,发现果真对人家没什么影响,还是那么完美的贴合。
刚就改了两个地方,于是,我把目光瞄准了css

尼玛,原来就是fixed和absolute的区别啊!
好了,问题这次真的解决了,测试了很多不同分辨率都OK

.mask{
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
background: rgba(0,0,0,.5);
}

  

css案例 - mask遮罩层的华丽写法的更多相关文章

  1. CSS创建一个遮罩层

    .layer{ width: 100%; position: absolute; left:; right:; top:; bottom:; -moz-opacity:; filter: alpha( ...

  2. 页面添加 mask 遮罩层

    var mask = function(){ $('<div>').css({ position: 'fixed', left: 0, top: 0, width: '100%', hei ...

  3. vux 中popup 组件 Mask 遮罩在最上层问题的解决

    1. 问题描述:popup弹出层在遮罩层下面的 2.原因:因为滚动元素和mask遮罩层在同一级,vux框架默认把遮罩层放在body标签下的 3.解决方法:更改一下源码,把mask遮罩层放在popup同 ...

  4. 纯js制作遮罩层对话框 -- g皓皓

    //本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  5. LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法

    LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...

  6. jQuery弹出遮罩层效果完整示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS遮罩层简易写法

      现在很多站点弹出框,都需要一个遮罩层.写法很多,以下是我比较喜欢的一种: .box{ position:absolute; top:0; bottom:0; left:0; right:0; ba ...

  8. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  9. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

随机推荐

  1. Eclipse中创建Maven项目失败

    Eclipse中创建Maven项目报错:Unable to create project from archetype org.apache.maven.archetypes:maven-archet ...

  2. Shiro Demo

    http://www.sojson.com/shiro http://blog.csdn.net/swingpyzf/article/details/46342023/

  3. iOS:获取 NSDate 的年

    NSDate *currentDate = [NSDate date]; NSCalendar* calendar = [NSCalendar currentCalendar]; NSDateComp ...

  4. 同一个Tomcat部署两个project之间的通信问题

    同一个tomcat下的两个project是无法通信的. 同一个tomcat中的project能互相调用吗 启动一个tomcat部署多个项目,那么每个项目算是一个线程还是进程呢? Tomcat中的pro ...

  5. PCL(Point Cloud Library)的第三方库简单介绍(boost,eigen,flann,vtk,qhull)

    PCL由于融合了大量的第三方开源库,导致学习成本升高~在学习之前我们最好还是了解一下这些库都是干嘛的,以便有的放矢.在之后更好的使用 boost: C++的标准库的备用版,擅长从数学库到智能指针,从模 ...

  6. [AngularJS]ng-repeat指令要点

    ng-repeat指令要点 1,基本格式,这里不作过多说明,需要的话查看文档 <div ng-repeat="item in someCollection [| someFilter: ...

  7. 1. BeeGo 介绍与项目的创建,启动

    简介 BeeGo是一个快速开发Go而应用的HTTP框架,他可以用来快速开发API,web以及后端服务等各种应用,是一个restful 的框架,主要涉及灵感来源于tornado,sinatr和flask ...

  8. Lua格式化输出

    我们知道lua中可以用".."连接字符串,可以起到一部分格式化字符串的作用,但是如果字符串较长或者有特殊的格式转换操作(如十六进制转换),用".."就会很繁琐且 ...

  9. 5种实现垂直居中css

    摘要: 在我们制作页面的时候经常会遇到内容垂直居中的需求,今天分享5种垂直居中的方法,每种方法都有自己的优缺点,可以选择自己喜欢的方式.以下代码都经过本人亲自测试. line-height: < ...

  10. HTML标签嵌套规则

    摘要:  最近在整理项目时发现有些同事写的页面代码嵌套的太多,而且有些嵌套不对,比如<a><div>内容</div></a>.虽然功能实现了,但是对于浏 ...