微信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"

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

【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...
微信h5支付在iframe弹窗的坑
官方接入文档参考链接: 微信H5支付遇到的坑微信H5支付iframe在苹果Safari的问题在苹果Safari浏览器通过iframe唤起微信或支付宝APP支付遇到的问题网络环境未能通过安全验 ...
解决小程序自定义弹窗滚动穿透问题
在小程序页面里有自定义弹窗时候,希望弹框里的scroll-view可以动,底部背景页面不要动方法一.catchtouchmove="true" 可以实现弹框背景不滚动,但是也会导 ...
H5移动端实现左右滑屏切换页面
项目中需要实现的一个需求是顶部有一个tab选择框,点选某一个tab的时候切换页面,并且支持手势滑动,左滑右滑可以同点选tab一样切换页面. 根据项目中选用的ui组件cube-ui为基准查看了一下可实现 ...
jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
css3层级穿透,css页面滑动穿透的两种解决办法
这篇文章主要介绍了css如何防止页面滑动穿透,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧问题描述: 移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背 ...
微信小程序 - vant popup弹出层阻止底层页面滑动
前言在小程序编写过程当中使用使用vant weapp的popup组件作小程序的弹出层,触屏致使底层页面跟着滑动.web 解决方法使用touch事件阻止属性,@touchmove.stop.prev ...
微信H5移动端真机调试--vConsole
在移动端实际开发中,还是会碰到一些棘手的bug,想看看到底哪里出了问题,苦于移动端不能F12啊.友好的微信给我们提供了这么一个入口,使开发者可以真机调试.给微信开发者点赞.然后就可以看到你打印的内容及 ...
微信公众号扫码关注并打开指定页面的解决方案
文章背景在微信中,打开app下载链接,或者使用微信扫一扫app下载二维码,都是无法下载app的.因为腾讯为了自身利益,屏蔽了其他app直接在微信中下载. 而访问指定网页的链接在微信内分享转发次数多了 ...