如何實(shí)現(xiàn)SCSS移動(dòng)端頁面遮罩層效果

這篇文章將為大家詳細(xì)講解有關(guān)如何實(shí)現(xiàn)SCSS移動(dòng)端頁面遮罩層效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

實(shí)例
可以兼容安卓4.0.4+：

設(shè)計(jì)結(jié)構(gòu)如下：

<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>

這個(gè)overlay遮罩層的問題，現(xiàn)在這里說明下為什么這么設(shè)計(jì)。

一般來說看到的overlay都與modal是兄弟元素，而不是嵌套關(guān)系。本來我也是這么設(shè)計(jì)的，這就是習(xí)慣。后來由于modal居中的問題，重新審視了下這個(gè)問題：

為什么遮罩層的overlay與彈窗內(nèi)容是兄弟元素？

說實(shí)話真想不出什么理由，非得搞成兄弟元素。后來突然意識(shí)到以前的遮罩層如果不采用半透明圖片的話，就得使用opacity（ie6-8不支持，通過濾鏡模擬），而這個(gè)屬性會(huì)對(duì)整個(gè)子元素都起作用，而且還沒辦法通過子元素覆寫這個(gè)值。這是我能想到的一條最佳理由，如果還有其他理由歡迎交流。

對(duì)于高上大的移動(dòng)端來說，都是rgba時(shí)代了，所以opacity回家吃飯先。既然這個(gè)對(duì)子元素的影響已經(jīng)不是問題，那么嵌套關(guān)系就可以成立，而且嵌套還有一個(gè)非常好的理由，水平垂直居中，flex小指一動(dòng)即可。而兄弟元素的水平垂直居中就得設(shè)置modal的top和left的值為50%，然后再設(shè)置translate的x和y方向都-50%

所以果斷拋棄兄弟元素設(shè)計(jì)換成嵌套關(guān)系。

因?yàn)閛verlay采用了flex布局來控制子元素居中，所以不難呢過采用display為none/block來顯示隱藏遮罩層overlay，而是通過z-index的層級(jí)來控制，而modal部分通過添加刪除modal-in這個(gè)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;   
            }   
        }   
    }   
}

常見問題解決
移動(dòng)端模擬彈窗時(shí)，遇到一些問題，現(xiàn)總結(jié)如下，以加深記憶。

情況一：
當(dāng)body高度大于viewport高度時(shí)，在彈窗上滑動(dòng)時(shí)，會(huì)遇到body也跟著滑動(dòng)的現(xiàn)象。

解決思路：
禁止touchmove，及overflow:hidden來實(shí)現(xiàn)，參考下面代碼：

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

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

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

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

情況三：
實(shí)現(xiàn)toast組件時(shí)，如果toast使用
position: fixed;bottom:-3rem;即離底部比較近時(shí)，按照我們正常想法應(yīng)該是鍵盤把頁面往上推，但是在IOS及Andriod UC瀏覽器中會(huì)出現(xiàn)toast被鍵盤覆蓋，即使我們?cè)O(shè)置z-index也無濟(jì)于事，因?yàn)殒I盤在整個(gè)瀏覽器的上層。

解決思路：
出現(xiàn)toast的時(shí)候，監(jiān)聽所有控件的事件，當(dāng)focus時(shí)，動(dòng)態(tài)計(jì)算當(dāng)前位置，重新計(jì)算。但是有個(gè)問題，不同機(jī)型鍵盤的高度不統(tǒng)一。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">   
<div class="toast">Toast</div>

關(guān)于“如何實(shí)現(xiàn)SCSS移動(dòng)端頁面遮罩層效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。