在web开发时,常有弹窗 + 蒙层遮罩的需求,这时遮罩下页面往往是可以滑动的,为了良好的客户体验,页面的滑动需要被禁止
根据弹窗的内容是否可以滑动,有2种不同的方式可供处理:
1) 弹窗内容不滑动
$('html,body').on("touchmove",function(e) {
e.preventDefault();
})
2) 弹窗内容滑动
body,html{wight: 100%; height: 100%; overflow: hidden;}//需要设置的样式
.ovfHiden {
wight: 100%;
height: 100%;
position: fixde;
}
/*弹窗显示时代码*/
var ruleTop = '';
$('.rule').click(function(){
$('.mask).removeClass('hidden');
ruleTop = $('.rule').offset().top;
$('html,body').addClass('ovfHiden');
});
/*弹窗隐藏时代码*/
var ruleTop = '';
$('.rule').click(function(){
$('.mask').addClass('hidden');
$('html,body').removeClass('ovfHiden');
$("body,html").scrollTop(ruleTop);
});