SCSS移动端页面遮罩层效果的实现及常见问题解决CSS实现鼠标移至图片上显示遮罩层效果css div实现的遮罩层完美兼容IE6-IE9 FireFoxCSS实现带遮罩层可关闭的弹窗效果

实例
可以兼容安卓4.0.4+：

设计结构如下：

这个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代码如下：

常见问题解决
移动端模拟弹窗时，遇到一些问题，现总结如下，以加深记忆。

情况一：
当body高度大于viewport高度时，在弹窗上滑动时，会遇到body也跟着滑动的现象。

解决思路：
禁止touchmove，及overflow:hidden来实现，参考下面代码：