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); //设置页面滚动的高度,如果不设置,关闭弹出层时页面会回到顶部。
})
推荐阅读
-
pc端,移动端添加弹窗禁止body滚动
-
跳出弹窗页面禁止滚动(PC端和手机端)
-
JavaScript实现移动端弹窗后禁止滚动
-
CSS实现移动端横向滚动导航条(PC端也适用)
-
wap网页 - thinkphp3.0项目 已经有了pc端 如何添加移动版网站?
-
wap网页 - thinkphp3.0项目 已经有了pc端 如何添加移动版网站?
-
关于js获取屏幕高度和宽度( window.document.body,window.screen)(PC端和移动端)
-
关于js获取屏幕高度和宽度( window.document.body,window.screen)(PC端和移动端)
-
移动端设置了overflow:hidden页面还会滚动的禁止方法
-
移动端设置了overflow:hidden页面还会滚动的禁止方法