欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

pc端,移动端添加弹窗禁止body滚动

程序员文章站 2023-12-28 21:44:28
...

1.css

.fixed{position: fixed;width:100%;}		// 由于如果不填写宽100%;有些人的宽会变窄

2.js

var Top = null;				// 设置Top为空
$(".btn").click(function(){		// 点击弹出弹窗禁止body滚动
	$(".rule_box").show()
	Top = $(window).scrollTop();
    $('body').css("top", -Top + "px"); //给body一个负的top值;
    $('body').addClass('fixed'); //给body增加一个类,position:fixed;
}
$(".close").click(function(){			// 隐藏弹窗解除body滚动
    $(".rule_box").hide()
    $('body').removeClass('fixed'); //去掉给body的类
    $('body').removeAttr("style");//去掉内联样式
    $(window).scrollTop(Top); //设置页面滚动的高度,如果不设置,关闭弹出层时页面会回到顶部。
})

上一篇:

下一篇: