移动端遮罩与禁止滚动开启滚动的一个超简单方法

js
$(function () {
var flag=false;
$(".xiadan").on("touchend",function (e) {
if(flag===false){
$(".xiadanBox").css('display','block');
flag=true;
$('html,body').addClass('ovfHiden'); //使网页不可滚动
showMask();
}else {
}

})
$(".close").on("touchend",function (e) {
$(".xiadanBox").css('display','none');
flag=false;
$('html,body').removeClass('ovfHiden'); //使网页恢复可滚
hideMask()
})

function showMask(){
$("#mask").css("height",$(document).height());
$("#mask").css("width",$(document).width());
$("#mask").show();
}
//隐藏遮罩层
function hideMask(){

$("#mask").hide();
}
})
css
.ovfHiden{position: fixed;left: 0;top: 0;}
.mask {
position: absolute; top: 0; filter: alpha(opacity=60); background-color: #777;
z-index: 1002; left: 0;
opacity:0.5; -moz-opacity:0.5;
}
posted @ 2017-11-21 17:40  微语123  阅读(241)  评论(1编辑  收藏  举报