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>

오버레이 마스크 레이어의 문제, 이제 왜 이런 방식으로 디자인되었는지 설명합니다.

일반적으로 표시되는 오버레이는 중첩 관계가 아니라 모달의 형제 요소입니다. 원래는 이렇게 디자인했는데, 그냥 습관일 뿐이에요. 나중에 모달 센터링 문제로 인해 이 질문을 다시 생각해 보았습니다.

마스크 레이어의 오버레이 및 팝업 콘텐츠가 형제 요소인 이유는 무엇입니까?

솔직히 굳이 형제요소여야 할 이유가 딱히 떠오르지 않네요. 나중에 이전 마스크 레이어가 반투명 이미지를 사용하지 않으면 불투명도를 사용해야 하며(예: 6-8은 이를 지원하지 않으며 필터를 통해 시뮬레이션됨) 이 속성이 전체 하위 요소에 영향을 미친다는 것을 갑자기 깨달았습니다. , 하위 요소를 통해 이 값을 재정의할 수 있는 방법이 없습니다. 이것이 제가 생각할 수 있는 가장 좋은 이유입니다. 다른 이유가 있다면 자유롭게 공유해 주세요.

고급형 모바일 단말기는 이제 RGBA 시대라 불투명도가 먼저 먹힌다. 하위 요소에 대한 영향은 더 이상 문제가 되지 않으므로 중첩 관계가 설정될 수 있으며 수평 및 수직 센터링에 대한 매우 좋은 이유가 있으므로 새끼 손가락을 움직이기만 하면 됩니다. 형제 요소를 가로, 세로 중앙에 배치하려면 모달의 위쪽 및 왼쪽 값을 50%로 설정한 다음 이동의 x 및 y 방향을 -50%로 설정해야 합니다

그래서 단호하게 형제 요소 디자인을 버리고 중첩 관계로 대체합니다.

오버레이는 flex 레이아웃을 사용하여 하위 요소의 중심 배치를 제어하기 때문에 디스플레이를 없음/블록으로 사용하여 마스크 레이어 오버레이를 표시하고 숨기는 것은 어렵지 않지만 z-index 수준을 통해 제어하는 ​​것은 어렵지 않습니다. 및 모달 모달인 클래스

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:
소프트 키보드가 뜰 때 맞춤 팝업창이 전체 화면을 채울 수 없습니다

해결책:
팝업창을 열기 전 자바스크립트의 블러 이벤트를 이용해 닫아주세요. 소프트 키보드.

$(“: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 중국어 웹사이트의 기타 관련 기사를 참조하세요!