100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html遮罩层禁止滚动条滚动 遮罩层上弹窗滚动时禁止下层页面滚动的处理

html遮罩层禁止滚动条滚动 遮罩层上弹窗滚动时禁止下层页面滚动的处理

时间:2021-06-20 12:24:36

相关推荐

html遮罩层禁止滚动条滚动 遮罩层上弹窗滚动时禁止下层页面滚动的处理

css的处理:html, body { height: 100%; } body{ position: relative; } /*遮罩层显示时body的样式*/ .notScroll { overflow: hidden; } /*遮罩层*/ .window_mask { position: fixed; top: 0 !important; } /*弹窗*/ .window_boundingBox { position: fixed !important; top: 50% !important; margin-top: -214px !important; z-index: 1001; width: 90%; left: 5%; background-color: rgb(232, 232, 232); border-radius: 3px; overflow: hidden; } /*弹窗中需要滚动的部分*/ .window_boundingBox .window_body { overflow: auto; webkit-overflow-scrolling: touch; line-height: 28px; font-size: 16px; padding: 5px 10px; height: 242px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

js处理:// 遮罩出来后让body不可滚动 $('body,html').addClass('notScroll'); //---------------------------- // 遮罩去掉之后body 可滚动 $('body,html').removeClass('notScroll');

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。