首頁  >  文章  >  web前端  >  SCSS行動端頁遮罩層效果的實作及常見問題的解決方法

SCSS行動端頁遮罩層效果的實作及常見問題的解決方法

高洛峰
高洛峰原創
2017-03-09 10:28:272759瀏覽

實例

可以相容於安卓4.0.4+:
SCSS行動端頁遮罩層效果的實作及常見問題的解決方法

#設計結構如下:

<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(&#39;dialog-tpl&#39;, {});   

    return {   
        tmpl : $(_tmpl),   

        /**
         * [create 创建弹窗]
         * @return {[type]} [description]
         */
        create: function() {   
            var me = this,   
                _tmpl = me.tmpl;   

            $(&#39;body&#39;)   

            // 禁用鼠标滚轮滚动
            .css(&#39;overflow&#39;, &#39;hidden&#39;)   

            .append(_tmpl)   

            // 禁止touchmove,阻止body滑动
            .on(&#39;touchmove&#39;, function(e) {   
                e.preventDefault();   
            })   

            // 关闭动作
            .on(&#39;tap&#39;, &#39;dialog-close&#39;, function() {   
                me.destroy();   
            })   
        },   

        /**
         * [destroy 销毁弹窗]
         * @return {[type]} [description]
         */
        destroy: function() {   
            this.tmpl.remove();   

            // 解除touchmove绑定、启用滚动
            $(&#39;body&#39;).off().css(&#39;overflow&#39;, &#39;auto&#39;);   
        }   
    }   
})();

情況二:
軟鍵盤彈起時,自定彈窗不能鋪滿全螢幕

解決想法:
打開彈窗前,透過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>

以上是SCSS行動端頁遮罩層效果的實作及常見問題的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn