Implémentation de l'effet de couche de masque de page mobile SCSS et solutions aux problèmes courants

Exemple

est compatible avec Android 4.0.4 :

La structure de conception est la suivante :

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

Ce problème avec le calque du masque de superposition, voici maintenant une explication de la raison pour laquelle il est conçu de cette façon.

De manière générale, la superposition que vous voyez est un élément frère du modal, plutôt qu'une relation imbriquée. À l'origine, je l'ai conçu de cette façon, c'est juste une habitude. Plus tard, en raison du problème de centrage modal, j'ai revisité cette question :

Pourquoi la superposition et le contenu contextuel du calque de masque sont-ils des éléments frères ?

Pour être honnête, je ne vois aucune raison pour laquelle ce doit être une fraternité. Plus tard, j'ai soudain réalisé que si le calque de masque précédent n'utilisait pas une image semi-transparente, il devrait utiliser l'opacité (ie6-8 ne le prend pas en charge, il est simulé via un filtre), et cet attribut affectera l'ensemble élément enfant, et il n'y a aucun moyen de remplacer cette valeur via des éléments enfants. C'est la meilleure raison à laquelle je puisse penser, s'il y a d'autres raisons, n'hésitez pas à les partager.

Pour les terminaux mobiles haut de gamme, c'est l'ère du rgba, donc l'opacité rentre chez soi pour manger en premier. Puisque l'impact sur les éléments enfants n'est plus un problème, la relation d'imbrication peut être établie, et il existe une très bonne raison pour l'imbrication horizontale et verticale, il suffit de déplacer votre petit doigt flexible. Pour centrer horizontalement et verticalement les éléments frères, vous devez définir les valeurs supérieure et gauche du modal à 50 %, puis définir les directions x et y de la traduction sur -50 %

Donc de manière décisive abandonnez la conception de l'élément frère et remplacez-la par une relation d'imbrication.

Étant donné que la superposition utilise une disposition flexible pour contrôler le centrage des éléments enfants, il n'est pas difficile d'utiliser display comme aucun/bloc pour afficher et masquer la superposition du calque de masque, mais pour la contrôler via le niveau z-index, et modal Contrôlez partiellement l'affichage et le masquage en ajoutant et en supprimant la classe modal-in

le code scss est le suivant :

.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 aux problèmes courants
Lors de la simulation de fenêtres pop-up sur le terminal mobile, j'ai rencontré quelques problèmes, qui sont résumés comme suit pour approfondir ma mémoire.

Situation 1 :
Lorsque la hauteur du corps est supérieure à la hauteur de la fenêtre, lors du glissement sur la fenêtre pop-up, le corps glissera également avec lui .

Solution :
Désactivez touchmove et implémentez overflow:hidden, reportez-vous au code suivant :

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

Cas 2 :
Lorsque le clavier contextuel apparaît, la fenêtre contextuelle personnalisée ne peut pas remplir tout l'écran

Solution :
Avant d'ouvrir la fenêtre contextuelle, utilisez l'événement flou de javascript pour fermez le clavier logiciel.

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

Cas 3 :
Lors de l'implémentation du composant toast, si toast utilise
position :fixed;bottom:-3rem; Autrement dit, lorsqu'il est proche du bas, selon notre pensée habituelle, le clavier devrait pousser la page vers le haut. Cependant, dans les navigateurs IOS et Andriod UC, le toast sera couvert par le clavier même si nous définissons le z-. index, cela n’aidera pas car le clavier est utilisé tout au long de la navigation sur la couche supérieure de l’appareil.

Solution :
Lorsqu'un toast apparaît, écoutez les événements de tous les contrôles, et lorsque le focus se produit, calculez dynamiquement la position actuelle et recalculez-la. Mais il y a un problème. La hauteur du clavier n’est pas uniforme selon les différents modèles. Code de référence côté 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!