Implementation of SCSS mobile page mask layer effect and solutions to common problems

Example

Compatible with Android 4.0.4+:

The design structure is as follows:

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

This overlay mask layer problem, now here is an explanation of why it is designed this way.

Generally speaking, the overlay you see is a sibling element to the modal, rather than a nested relationship. Originally I designed it this way, it's just a habit. Later, due to the problem of modal centering, I re-examined this question:

Why are the overlay and pop-up content of the mask layer sibling elements?

To be honest, I can’t think of any reason why it has to be a brother element. Later, I suddenly realized that if the previous mask layer did not use a semi-transparent image, it would have to use opacity (ie6-8 does not support it, it is simulated through a filter), and this attribute will affect the entire child element, and there is no way Override this value via child elements. This is the best reason I can think of, if there are other reasons please feel free to share.

For high-end mobile terminals, it is the era of rgba, so opacity goes home to eat first. Since the impact on child elements is no longer a problem, the nesting relationship can be established, and there is a very good reason for nesting. Horizontal and vertical centering, just move your flex little finger. To horizontally and vertically center the sibling elements, you need to set the top and left values ​​of the modal to 50%, and then set the x and y directions of the translate to -50%

So decisively abandon the sibling element design and replace it with nesting relation.

Because overlay uses flex layout to control the centering of child elements, it is not difficult to use display as none/block to display and hide the mask layer overlay, but to control it through the z-index level, and modal Partially control the display and hiding by adding and deleting the modal-in class

scss code is as follows:

.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;   
            }   
        }   
    }   
}

Solution to common problems
When simulating pop-up windows on the mobile terminal, we encountered some problems, which are summarized as follows to deepen our memory.

Situation 1:
When the height of the body is greater than the height of the viewport, when sliding on the pop-up window, the body will also slide along with it.

Solution idea:
Disable touchmove, and implement overflow:hidden, refer to the following code:

/**
 * 初始化弹窗
 */
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');   
        }   
    }   
})();

Case 2:
When the soft keyboard pops up, the custom pop-up window cannot cover the full screen

Solution:
Before opening the pop-up window, use the blur event of javascript to close the soft keyboard.

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

Case 3:
When implementing the toast component, if toast uses
position: fixed;bottom:-3rem; that is When the bottom is close, according to our normal thinking, the keyboard should push the page up. However, in IOS and Andriod UC browsers, the toast will be covered by the keyboard. Even if we set the z-index, it will not help because the keyboard is in the entire browser. upper layer.

Solution idea:
When toast appears, listen to the events of all controls. When focus is reached, dynamically calculate the current position and recalculate it. But there is a problem. The height of the keyboard is not uniform for different models. M-side reference code:

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

The above is the detailed content of Implementation of SCSS mobile page mask layer effect and solutions to common problems. For more information, please follow other related articles on the PHP Chinese website!