SCSS挪动端网页页面遮罩层实际效果的完成及普遍

日期:2021-03-03 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

案例
能够适配安卓系统4.0.4+:

设计方案构造以下:

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遮罩层的难题,如今这里表明下为何这么设计方案。

1般来讲看到的overlay都与modal是弟兄元素,而并不是嵌套循环关联。原本我也是这么设计方案的,这便是习惯性。后来因为modal垂直居中的难题,再次审视了下这个难题:

为何遮罩层的overlay与弹窗內容是弟兄元素?

说真话真想不出甚么理由,非得搞成弟兄元素。后来忽然观念到之前的遮罩层假如不选用半全透明照片的话,就得应用opacity(ie6⑻不适用,根据滤镜仿真模拟),而这个特性会对全部子元素都起功效,并且还没法根据子元素覆写这个值。这是我能想起的1条最好理由,假如也有别的理由欢迎沟通交流。

针对高上大的挪动端来讲,全是rgba时期了,因此opacity回家了吃饭先。既然这个对子元素的危害早已并不是难题,那末嵌套循环关联便可以创立,并且嵌套循环也有1个十分好的理由,水平竖直垂直居中,flex小指1动便可。而弟兄元素的水平竖直垂直居中就得设定modal的top和left的值为50%,随后再设定translate的x和y方位都⑸0%

因此坚决抛下弟兄元素设计方案换为嵌套循环关联。

由于overlay选用了flex合理布局来操纵子元素垂直居中,因此不难呢过选用display为none/block来显示信息掩藏遮罩层overlay,而是根据z-index的等级来操纵,而modal一部分根据加上删掉modal-in这个class来操纵显示信息掩藏

scss编码以下:

CSS Code拷贝內容到剪贴板
  1. .overlay{   
  2.     positionfixed;   
  3.     top: 0;   
  4.     rightright: 0;   
  5.     bottombottom: 0;   
  6.     left: 0;   
  7.     z-index: ⑴;   
  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.     overflowhidden;   
  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-aligncenter;   
  35.         line-height: $modalBarHeight;   
  36.         background-color: $primary;   
  37.         color#fff;   
  38.     }   
  39.     .modal-bd{   
  40.         padding: $modalBdPadding;   
  41.     }   
  42.     .modal-ft{   
  43.         border-top1px solid $gray;   
  44.         @extend %display-flex;   
  45.         .btn-modal{   
  46.             @include flex(1);   
  47.             background-color#fefefe;   
  48.             text-aligncenter;   
  49.             line-height: $modalBarHeight;   
  50.             color: $primary;   
  51.             &:first-child{   
  52.                 border-right1px solid $gray;   
  53.             }   
  54.             &:last-child{   
  55.                 border-rightnone;   
  56.             }   
  57.             &:hover,&:active{   
  58.                 background-color#d9d9d9;   
  59.             }   
  60.         }   
  61.     }   
  62. }  


普遍难题处理
挪动端仿真模拟弹窗时,遇到1些难题,现总结以下,以加深记忆力。

状况1:
当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. })();  

状况2:
软电脑键盘弹起时,自定弹窗不可以铺满全屏

处理思路:
开启弹窗前,根据javascript的blur恶性事件来收起软电脑键盘。

JavaScript Code拷贝內容到剪贴板
  1. $(“:focus”).blur();  

状况3:
完成toast组件时,假如toast应用
position: fixed;bottom:⑶rem;即离底部较为近时,依照大家一切正常念头应当是电脑键盘把网页页面往上推,可是在IOS及Andriod UC访问器中会出現toast被电脑键盘遮盖,即便大家设定z-index也于事无补,由于电脑键盘在全部访问器的顶层。

处理思路:
出現toast的情况下,监视全部控制的恶性事件,当focus时,动态性测算当今部位,再次测算。可是有个难题,不一样机型电脑键盘的高宽比不统1。M端一部分参照编码:

CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2.     body {   
  3.         text-aligncenter;   
  4.     }   
  5.     input[type=text] {   
  6.         width: 80%;    
  7.         height: .8rem;   
  8.         margin-top: .3rem;   
  9.     }   
  10.     .toast {   
  11.         positionfixed;    
  12.         bottombottom: .3rem;    
  13.         left: 50%;    
  14.         margin-left: ⑴rem;    
  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>