SCSS移動端頁面遮罩層效果的實現及常見問題的解決方案

執行個體

可以相容安卓4.0.4+：

設計結構如下：

<header class="header"></header><p class="wrap-page">    <section class="page"></section>    ...   </p><footer class="footer"></footer><p class="overlay">    <section class="modal">        <p class="modal-hd"></p>        <p class="modal-bd"></p>        <p class="modal-ft"></p>    </section></p>

這個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代碼如下：

.overlay{       position: fixed;       top: 0;       rightright: 0;       bottombottom: 0;       left: 0;       z-index: -1;       background-color: rgba(0,0,0,.8);       @include flex-center; // flex水平垂直置中   }   .overlay.active {     z-index: 980;   }   $modalBarHeight: 40px !default;   $modalBdPadding: 15px;   .modal{       background-color: #fff;       border-radius: 5px;       margin: 0 10px;       overflow: hidden;       opacity: 0;       @include transform(translate3d(0,0,0) scale(0.815));       @extend %all-transition;       @include transition-property(transform, opacity);       &.modal-in{           opacity: 1;           @include transform(translate3d(0,0,0) scale(1));       }       .modal-hd{           text-align: center;           line-height: $modalBarHeight;           background-color: $primary;           color: #fff;       }       .modal-bd{           padding: $modalBdPadding;       }       .modal-ft{           border-top: 1px solid $gray;           @extend %display-flex;           .btn-modal{               @include flex(1);               background-color: #fefefe;               text-align: center;               line-height: $modalBarHeight;               color: $primary;               &:first-child{                   border-right: 1px solid $gray;               }               &:last-child{                   border-right: none;               }               &:hover,&:active{                   background-color: #d9d9d9;               }           }       }   }

常見問題解決
移動端類比彈窗時，遇到一些問題，現總結如下，以加深記憶。

情況一：
當body高度大於viewport高度時，在彈窗上滑動時，會遇到body也跟著滑動的現象。

解決思路：
禁止touchmove，及overflow:hidden來實現，參考下面代碼：

/** * 初始化彈窗 */var initDialog = (function() {       var _tmpl = baidu.template('dialog-tpl', {});       return {           tmpl : $(_tmpl),           /**         * [create 建立彈窗]         * @return {[type]} [description]         */        create: function() {               var me = this,                   _tmpl = me.tmpl;               $('body')               // 禁用滑鼠滾輪滾動            .css('overflow', 'hidden')               .append(_tmpl)               // 禁止touchmove，阻止body滑動            .on('touchmove', function(e) {                   e.preventDefault();               })               // 關閉動作            .on('tap', 'dialog-close', function() {                   me.destroy();               })           },           /**         * [destroy 銷毀彈窗]         * @return {[type]} [description]         */        destroy: function() {               this.tmpl.remove();               // 解除touchmove綁定、啟用滾動            $('body').off().css('overflow', 'auto');           }       }   })();

情況二：
軟鍵盤彈起時，自定彈窗不能鋪滿全屏

解決思路：
開啟彈窗前，通過javascript的blur事件來收合軟鍵盤。

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

情況三：
實現toast組件時，如果toast使用
position: fixed;bottom:-3rem;即離底部比較近時，按照我們正常想法應該是鍵盤把頁面往上推，但是在IOS及Andriod UC瀏覽器中會出現toast被鍵盤覆蓋，即使我們設定z-index也無濟於事，因為鍵盤在整個瀏覽器的上層。

解決思路：
出現toast的時候，監聽所有控制項的事件，當focus時，動態計算當前位置，重新計算。但是有個問題，不同機型鍵盤的高度不統一。M端部分參考代碼：

<style type="text/css">       body {           text-align: center;       }       input[type=text] {           width: 80%;            height: .8rem;           margin-top: .3rem;       }       .toast {           position: fixed;            bottombottom: .3rem;            left: 50%;            margin-left: -1rem;            width: 2rem;            height: 1rem;            background-color: #f00;            border-radius: 10px;           color: #fff;       }   </style>   <input type="text">   <p class="toast">Toast</p>