java怎么让遮罩层下面滚动_vue项目弹出层后禁止body底层的滚动事件

1.新建utils/modalHelper.js文件

// 解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用

let _scrollTop

class ModalHelper {

// popup 显示时调用

static afterOpen () {

_scrollTop = document.scrollingElement.scrollTop

document.body.style.position = 'fixed'

document.body.style.top = -_scrollTop + 'px'

}

// popup 关闭时调用

static beforeClose () {

document.body.style.position = ''

document.body.style.top = ''

// 使 scrollTop 恢复原状

document.scrollingElement.scrollTop = _scrollTop

}

export default ModalHelper

2.main.js中全局引入ModalHelper

import ModalHelper from './utils/modalHelper'

Vue.prototype.$modalHelper = ModalHelper

3.vue页面使用

isPayment1(val) {

if (val) {

this.$modalHelper.afterOpen(); // 打开禁用

} else {

this.$modalHelper.beforeClose(); // 关闭禁用

}

4.为避免用户使用按键返回，需在页面离开时移除禁用即可

beforeRouteLeave (to, from, next) {

this.$modalHelper.beforeClose()

next()

java怎么让遮罩层下面滚动_vue项目弹出层后禁止body底层的滚动事件相关推荐

layui点击弹出层中按钮，关闭弹出层
layui点击弹出层中按钮,关闭弹出层原理:点击自己定义的button时,触发弹出层右上角取消按钮. <button type="button" lay-submit=&q ...
html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别, ...
layui弹出层闪退，layer弹出层闪退，layer弹出层坑
这两天用layui的弹出层插件,发现两奇怪的问题: 1.弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2.绑定弹出层到按钮,打开弹窗闪退后面发现真如参考博文所说 ...
php layer弹出层更改背景,layui.layer 弹出层背景透明，前景无阴影实现方案
先上具体实现方法. 首先,在 css 里给 layer 弹出层写个自定义 skin (这点不明白的同学请出门左转 layui 官网文档):.myskin{ background-colo ...
html弹出层获取填充数据,layui 弹出层回调获取弹出层数据的例子
如下所示: // 弹出楼栋负责人信息页面 layer.open({ type: 2, title:'请选择楼栋负责人', maxmin: false, area: ['60%', '80%'], of ...
layui layer弹出层通过offset属性定位弹出层在光标处弹出(event.clientY和event.clientX)失败。
将弹出层弹出位置定位到光标处,大小超过父弹出层的部分无法显示 .js //页面层-自定义 $("#more").click(function (event) {layer.open ...
移动端弹出层滚动时禁止body滚动
相信很多写移动端的朋友会遇到这个问题,我也遇到了,之后就辛辛苦苦的在网上找解决办法,下面我大概提一下我在网上看到的几种办法,行不行的通呢?本人就亲测了下.本人学的还不是太深,如果有什么不对的地方或者有 ...
JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
html5相对父元素定位,layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...

java怎么让遮罩层下面滚动_vue项目弹出层后禁止body底层的滚动事件

java怎么让遮罩层下面滚动_vue项目弹出层后禁止body底层的滚动事件相关推荐

最新文章

热门文章