在移动端中,点击按钮弹窗窗口后会发现窗口底下是可以滚动的,这是由于窗口设置成了position:fixed造成了穿透效果
部分css代码
.noscroll{height:100%!important;overflow:hidden!important;}/*防止fixed穿透*/
#mask{height:100%; width:100%; position:fixed;top:0!important; z-index:200;background: rgba(0,0,0,.5);overflow:hidden} /*黑色遮罩层*/ #setajax{position:fixed;width:96%;height:auto;overflow:hidden;top:50%;margin-top:-236px;left:2%;background:#fff;z-index:201;display:none}/*弹出框*/#uclose{position:absolute;right:10px;top:14px;font-size:18px;cursor:pointer} /*关闭按钮*/解决方法Jquery
$(".settask").click(function(){
var editname=$(this).attr("rvalue");
var ajax_url=$(this).attr("ajax_url");
var act=$(this).attr("act");
var backid=$(this).attr("backid");
var btnid=$(this).attr("btnid");
var viewid=$(this).attr("viewid");
$("body").append("<div id='mask'></div>");
var upstr="<div id='setajax'><div class='modal-header'><i id='sclose' class='fa fa-close'></i><h4 class='modal-title'>"+editname+"</h4></div>";
upstr=upstr+"<div class='modal-body2'><div class='modal-body3'></div></div></div>";
$("body").append(upstr);
$("#setajax").slideDown();
$("#sclose").attr("onclick","closesx();");
/*防止fixed穿透*/
$("html,body").toggleClass('noscroll');
document.body.style.overflow='hidden';
document.body.style.position='fixed';
/*防止fixed穿透*/
//ajax
$.ajax({ url:ajax_url,type: "post",data: {ajax_url:ajax_url,act:act,backid:backid,btnid:btnid,viewid:viewid},async:false,cache: true,success: function(data){
// $.DialogByZ.Close();
if(data==""){
$.DialogByZ.Close();
$.DialogByZ.Autofade({Title: "提示", Content:"参数丢失",Reload:"1",BtnL:"确定",FunL:alerts});
return false;
}else if(data==400){
$.DialogByZ.Close();
$.DialogByZ.Autofade({Title: "提示", Content:"方法不存在",Reload:"1",BtnL:"确定",FunL:alerts});
return false;
}else if(data==500){
$.DialogByZ.Close();
$.DialogByZ.Autofade({Title: "提示", Content:"任务过期",Reload:"1",BtnL:"确定",FunL:alerts});
return false;
}else if(data==600){
$.DialogByZ.Close();
$.DialogByZ.Autofade({Title: "提示", Content:"禁止更新",Reload:"1",BtnL:"确定",FunL:alerts});
return false;
}else{
$(".modal-body3").html(data);
return false;
}//else
}});//ajax
}); function closesx(){
/*解除穿透*/
document.body.style.overflow='auto';
document.body.style.position='static';
$("html,body").toggleClass('noscroll');
/*解除穿透*/
$("#setajax").remove();
$("#mask").remove(); }; 红色字体部分代码为关键代码
$("html,body").toggleClass('noscroll'); 页面所在本站地址: http://www.52-life.net/N_mobile_fixed.htm |