SCSS モバイル ページ マスク レイヤー効果の実装と一般的な問題の解決策

例

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

このオーバーレイ マスク レイヤーの問題点。なぜこのようにデザインされているかを説明します。 。

一般的に、表示されるオーバーレイは、入れ子になった関係ではなく、モーダルの兄弟要素です。もともとこのように設計していましたが、それはただの習慣です。その後、モーダルのセンタリングの問題により、次の質問を再検討しました:

マスク レイヤーのオーバーレイ コンテンツとポップアップ コンテンツは兄弟要素であるのはなぜですか?

正直に言うと、なぜ兄弟愛でなければならない理由が思いつきません。後で、前のマスクレイヤーが半透明の画像を使用していない場合は、不透明度を使用する必要があることに突然気づきました（ie6-8は不透明度をサポートしていません。フィルターを通してシミュレートされています）、この属性は子要素全体に影響します、子要素を介してこの値をオーバーライドする方法はありません。これが私が思いつく最大の理由ですが、他にも理由がある場合は、お気軽に共有してください。

ハイエンドのモバイル端末では、rgba の時代なので、opacity は家に帰って最初に食べます。子要素への影響が問題にならないため、ネスト関係を確立できます。水平方向と垂直方向の中央揃えには、小指を動かすだけで十分な理由があります。兄弟要素を水平方向と垂直方向の中央に配置するには、モーダルの上と左の値を 50% に設定し、次に、translate の x 方向と y 方向を -50% に設定する必要があります

したがって、兄弟要素を思い切って放棄します設計し、ネストされた関係に置き換えます。

オーバーレイはフレックス レイアウトを使用して子要素のセンタリングを制御するため、display as none/block を使用してマスク レイヤー オーバーレイを表示または非表示にすることは難しくありません。代わりに、z インデックス レベルとモーダル部分を追加、削除するこのクラスで表示と非表示を制御します

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

モバイル端末でポップアップウィンドウをシミュレートするとき、いくつかの問題に遭遇しましたが、記憶を深めるために次のように要約されます。

状況 1:

本体の高さがビューポートの高さより大きい場合、ポップアップ ウィンドウ上をスライドすると、本体もそれに伴ってスライドします。
解決策:

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');   
        }   
    }   
})();

ケース 2:

ソフト キーボードがポップアップすると、カスタム ポップアップ ウィンドウが全画面に表示されない
解決策:

ポップアップウィンドウを開く前に、JavaScriptのblurイベントを使用してソフトキーボードを閉じてください。

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

ケース 3:

トーストコンポーネントを実装するとき、トーストが
position:fixed;bottom:-3rem; を使用する場合、つまり、通常の考え方によれば、トーストが比較的底に近い場合、ただし、IOS および Andriod UC ブラウザでは、キーボードがブラウザ全体の上位層にあるため、z-index を設定してもトーストがカバーされてしまいます。 。
解決策のアイデア:

トーストが表示されたら、すべてのコントロールのイベントをリッスンし、フォーカスに到達すると、現在の位置を動的に計算して再計算します。しかし、キーボードの高さがモデルによって均一ではないという問題があります。 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 中国語 Web サイトの他の関連記事を参照してください。