SCSS移动端页面遮罩层效果的实现及常见问题解决资源-CSDN文库

93 浏览量 2020-12-28 19:04:30 上传评论收藏 108KB PDF 举报

资源推荐

资源详情

资源评论

SCSS移动端页面遮罩层效果的实现及常见问题解决移动端页面遮罩层效果的实现及常见问题解决

实例

可以兼容安卓4.0.4+：

设计结构如下：

XML/HTML Code复制内容到剪贴板

<header class="header"></header>

<div class="wrap-page">

<section class="page"></section>

…

</div>

<footer class="footer"></footer>

<div class="overlay">

<section class="modal">

<div class="modal-hd"></div>

<div class="modal-bd"></div>

<div class="modal-ft"></div>

</section>

</div>

这个overlay遮罩层的问题，现在这里说明下为什么这么设计。

一般来说看到的overlay都与modal是兄弟元素，而不是嵌套关系。本来我也是这么设计的，这就是习惯。后来由于modal居中

的问题，重新审视了下这个问题：

为什么遮罩层的overlay与弹窗内容是兄弟元素？

说实话真想不出什么理由，非得搞成兄弟元素。后来突然意识到以前的遮罩层如果不采用半透明图片的话，就得使用

opacity（ie6-8不支持，通过滤镜模拟），而这个属性会对整个子元素都起作用，而且还没办法通过子元素覆写这个值。这是

我能想到的一条最佳理由，如果还有其他理由欢迎交流。

对于高上大的移动端来说，都是rgba时代了，所以opacity回家吃饭先。既然这个对子元素的影响已经不是问题，那么嵌套关

系就可以成立，而且嵌套还有一个非常好的理由，水平垂直居中，flex小指一动即可。而兄弟元素的水平垂直居中就得设置

modal的top和left的值为50%，然后再设置translate的x和y方向都-50%

所以果断抛弃兄弟元素设计换成嵌套关系。

因为overlay采用了flex布局来控制子元素居中，所以不难呢过采用display为none/block来显示隐藏遮罩层overlay，而是通过z-

index的层级来控制，而modal部分通过添加删除modal-in这个class来控制显示隐藏

scss代码如下：

CSS Code复制内容到剪贴板

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38532629

粉丝: 5
资源: 921

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip