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

ttx9n

这篇文章主要介绍了SCSS移动端页面遮罩层效果的实现及常见问题解决,使用CSS的预处理器框架SCSS写起来比原生CSS会来得更加简便一些,需要的朋友可以参考下

实例
可以兼容安卓4.0.4+：

201669105353262.jpg

设计结构如下：

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

1. <header class="header"></header>  
2. <div class="wrap-page">  
3.     <section class="page"></section>  
4.     ...   
5. </div>  
6. <footer class="footer"></footer>  
7. <div class="overlay">  
8.     <section class="modal">  
9.         <div class="modal-hd"></div>  
10.         <div class="modal-bd"></div>  
11.         <div class="modal-ft"></div>  
12.     </section>  
13. </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复制内容到剪贴板

1. .overlay{   
2.     position: fixed;   
3.     top: 0;   
4.     rightright: 0;   
5.     bottombottom: 0;   
6.     left: 0;   
7.     z-index: -1;   
8.     background-color: rgba(0,0,0,.8);   
9.     @include flex-center; // flex水平垂直居中   
10. }   
11. .overlay.active {   
12.   z-index: 980;   
13. }   
14.   
15. $modalBarHeight: 40px !default;   
16. $modalBdPadding: 15px;   
17.   
18. .modal{   
19.     background-color: #fff;   
20.     border-radius: 5px;   
21.     margin: 0 10px;   
22.     overflow: hidden;   
23.     opacity: 0;   
24.     @include transform(translate3d(0,0,0) scale(0.815));   
25.     @extend %all-transition;   
26.     @include transition-property(transform, opacity);   
27.   
28.     &.modal-in{   
29.         opacity: 1;   
30.         @include transform(translate3d(0,0,0) scale(1));   
31.     }   
32.   
33.     .modal-hd{   
34.         text-align: center;   
35.         line-height: $modalBarHeight;   
36.         background-color: $primary;   
37.         color: #fff;   
38.     }   
39.     .modal-bd{   
40.         padding: $modalBdPadding;   
41.     }   
42.     .modal-ft{   
43.         border-top: 1px solid $gray;   
44.         @extend %display-flex;   
45.         .btn-modal{   
46.             @include flex(1);   
47.             background-color: #fefefe;   
48.             text-align: center;   
49.             line-height: $modalBarHeight;   
50.             color: $primary;   
51.             &:first-child{   
52.                 border-right: 1px solid $gray;   
53.             }   
54.             &:last-child{   
55.                 border-right: none;   
56.             }   
57.             &:hover,&:active{   
58.                 background-color: #d9d9d9;   
59.             }   
60.         }   
61.     }   
62. }  

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

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

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

JavaScript Code复制内容到剪贴板

1. /**  
2.  * 初始化弹窗  
3.  */  
4. var initDialog = (function() {   
5.     var _tmpl = baidu.template('dialog-tpl', {});   
6.   
7.     return {   
8.         tmpl : $(_tmpl),   
9.   
10.         /**  
11.          * [create 创建弹窗]  
12.          * @return {[type]} [description]  
13.          */  
14.         create: function() {   
15.             var me = this,   
16.                 _tmpl = me.tmpl;   
17.   
18.             $('body')   
19.   
20.             // 禁用鼠标滚轮滚动   
21.             .css('overflow', 'hidden')   
22.   
23.             .append(_tmpl)   
24.   
25.             // 禁止touchmove，阻止body滑动   
26.             .on('touchmove', function(e) {   
27.                 e.preventDefault();   
28.             })   
29.   
30.             // 关闭动作   
31.             .on('tap', 'dialog-close', function() {   
32.                 me.destroy();   
33.             })   
34.         },   
35.   
36.         /**  
37.          * [destroy 销毁弹窗]  
38.          * @return {[type]} [description]  
39.          */  
40.         destroy: function() {   
41.             this.tmpl.remove();   
42.   
43.             // 解除touchmove绑定、启用滚动   
44.             $('body').off().css('overflow', 'auto');   
45.         }   
46.     }   
47. })();  

情况二：
软键盘弹起时，自定弹窗不能铺满全屏

解决思路：
打开弹窗前，通过javascript的blur事件来收起软键盘。

JavaScript Code复制内容到剪贴板

1. $(“:focus”).blur();  

情况三：
实现toast组件时，如果toast使用
position: fixed;bottom:-3rem;即离底部比较近时，按照我们正常想法应该是键盘把页面往上推，但是在IOS及Andriod UC浏览器中会出现toast被键盘覆盖，即使我们设置z-index也无济于事，因为键盘在整个浏览器的上层。

解决思路：
出现toast的时候，监听所有控件的事件，当focus时，动态计算当前位置，重新计算。但是有个问题，不同机型键盘的高度不统一。M端部分参考代码：

CSS Code复制内容到剪贴板

1. <style type="text/css">   
2.     body {   
3.         text-align: center;   
4.     }   
5.     input[type=text] {   
6.         width: 80%;    
7.         height: .8rem;   
8.         margin-top: .3rem;   
9.     }   
10.     .toast {   
11.         position: fixed;    
12.         bottombottom: .3rem;    
13.         left: 50%;    
14.         margin-left: -1rem;    
15.         width: 2rem;    
16.         height: 1rem;    
17.         background-color: #f00;    
18.         border-radius: 10px;   
19.         color: #fff;   
20.     }   
21. </style>   
22. <input type="text">   
23. <div class="toast">Toast</div>  

btbhs8t

搞个免费的用用

bp5jgbcnt

不错的源码论坛

kestlhoxn

不错的源码论坛

JosephSA

天天源码论坛

.l4

来看看！！！

70r45_zs

女生看了弄丢了卡萨诺的卡洛斯

qwe520

收下来看看怎么样

u6h2m4

啦啦啦啦啦德玛西亚

溪谷小兵

谢谢楼主分享