在做移动端页面开发时,当弹出弹出层后,发现后面的背景内容可以上下滑动,经过一番研究后,得出以下解决办法:
PS:需要引入最新的 jquery.js 文件。
方法:
1、给弹出按钮设置一个id,当点击出弹出层时,通过js给 <html>、<body>设置两个css属性来禁止上下滑动即:
height:100%;
overflow:hidden;
2、当点击关闭弹出层时,给关闭按钮再次设置一个id,并通过js取消上面设置的两个css属性,从而释放上下滑动。
但兼容性还需要进一步验证
完整代码:
$("#puchuse").click(function(){
$('html').attr("style", "overflow:hidden;height:100%;");
$('body').attr("style", "overflow:hidden;height:100%;");
});
$("#closePopup").click(function(){
$('html').removeAttr("style");
$('body').removeAttr("style");
});