弹窗的滚动条不影响 body的滚动

最新推荐文章于 2024-04-10 16:21:05 发布

dxj124

最新推荐文章于 2024-04-10 16:21:05 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/dxj124/article/details/85121608

css 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的弹窗功能，当点击显示弹窗的按钮(.btn-actsm)时，页面主体(body)的滚动将被禁用，以防止用户在弹窗打开时滚动背景页面。当关闭弹窗(.btn-close)时，滚动功能恢复正常。通过为body添加和移除'pon'类来控制这一行为，该类设置宽度、高度和溢出属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 弹窗的滚动条不影响 body的滚动
$('.btn-actsm').click(function(){
    $('body').addClass('pon');
});

$('.btn-close').click(function(){
    $('body').removeClass('pon');
});


注： .btn-actsm :点击出现弹窗的按钮；  .btn-close ：点击关闭弹窗的按钮；



css:
body.pon{width:100%;height:100%;overflow: hidden;}