微信H5、移动端自定义弹窗事件穿透、底层页面滑动解决方案

前言 

之前有个项目是运行在移动端Web，和微信H5中，由于默认的弹窗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"