台州温岭做网站请找我们 (专业建站 | 诚信服务) 13958630945 在线客服 联系技术

佳源设计|台州网站建设|佳源网页设计

网站当前位置: 首页>>做网站步骤>>H5防止手机端弹出窗底层可滚动,解决手机端fixed穿透
建站流程
 
建站知识
 
网站建站疑难
 
网站设计_图象处理
 
网站设计_Css样式
 
网站建设_Flash疑难
 
手机网站建设
 
 建站知识搜索
 

台州网站建设
 
网站优化
 
提交疑问
 做网站步骤 > H5防止手机端弹出窗底层可滚动,解决手机端fixed穿透

H5防止手机端弹出窗底层可滚动,解决手机端fixed穿透

100次浏览
2019-11-06
在移动端中,点击按钮弹窗窗口后会发现窗口底下是可以滚动的,这是由于窗口设置成了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
上一篇 >>php解决高并发(文件锁)
下一篇 >>Jquery 仿微信语音