怎么写遮罩层 css,css案例 - mask遮罩层的华丽写法

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创建一个遮罩层

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

页面添加 mask 遮罩层

var mask = function(){ $('

').css({ position: 'fixed', left: 0, top: 0, width: '100%', hei ...

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

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

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

//本文支持js在线工具测试.转载请注明出处. < ...

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

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

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

% url 'cms:add' %}">

maven包上传私服

选择需要上传的项目右键-->Run As-->Run Configurations-->Maven Buid-->右键 new -->选择 base directory- ...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值