微信H 5、移動端カスタムポップアップイベント透過、下位ページスライドソリューション

前言

以前、モバイル端末のWebと微信H 5で実行されていたプロジェクトがありましたが、デフォルトのポップアップUIはあまりきれいではなく、統一されていないため、ページはカスタムポップアップが必要で、icon、ヒント情報、操作ボタンなどのスタイルを追加します.
 

問題の説明:

ページの内容の高さが表示領域を超えるとスクロールバーが出てきます.このとき、表示弾窓がトリガーされるとページの貫通イベントが発生し、弾窓がスライドしているときや弾窓がスライドしているときにスライドすることができます.このとき、下部の元のページもスライドし、下部の元のページの機能ボタンをクリックするとイベントがトリガーされます.
 

解決策：

1.fastclickを使用する.jsプラグインライブラリ、ダウンロードアドレス:https://www.bootcdn.cn/fastclick
2、カスタムポップアップウィンドウを開くとイベントがトリガーされ(イベントのデフォルト動作をキャンセル)、スクロールバーがないように下のスクロールを禁止し、カスタムポップアップウィンドウを閉じるとアクションを元に戻せます.
 

弾窓CSSスタイルレイアウト:

ここでは、icon、ヒント、操作ねじりなど、背景レイヤと弾窓のスタイルのみを提供し、プロジェクトのニーズに応じてカスタマイズできます.

.alert-box{
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0;
    left: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1024;
}

.alert-box .alert{
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: all 1s cubic-bezier(.79,-0.54,.31,1.44);
}

 

弾窓トリガ対応JSイベント:

注意:Angular.で使用する場合はjs、React.js Vue.jsでは、それに対応する文法を改造するだけでいい!

//          
function scroll(event) {
    var evt = event || window.event;
    evt.preventDefault();
} 

//         show()
function show() {
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
    document.addEventListener("touchmove", scroll, false);
};

//         close()
function close() {
    document.body.style.overflow = 'initial';
    document.body.style.position = 'initial';
    document.removeEventListener("touchmove", scroll, false);
};


//            ，                   
fixed="true" catchtouchmove="true"