移动端弹出页面穿透问题

解决方案

1、弹出时给html标签追加height:100%

2、弹出父级元素追加overflow:hidden

3、弹出和遮罩 position:absolute

4、在页面顶部增加fixed ios会固定在顶部，不会出现系统下拉

demo

<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">

<style>
body{background: #fff; width: 100%; height: 100%;}
.view{width: 100%; height: 100%; position: relative;}
.fix{width: 100%; height: 2rem; line-height: 2rem; position: fixed; background: #fff; text-indent: 1rem;}
.cl{width: 100%; height: 2rem;}
.main{width: 100%; line-height: 3rem; text-indent: .6rem;}
.popup{width: 90%; height: 100%; position: absolute; top: 0; right: 0; overflow-y: auto; overflow-x: hidden; background: #f4f4f4; display: none; line-height: 3rem; text-indent: .6rem; z-index: 10}
.layout{width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; position: absolute; top: 0; z-index: 9}
</style>
</head>
<body class="bg">
	<div class="view">
		<div class="fix"><a href="javascript:;" id="zreo">0000</a></div>
		<div class="cl"></div>
		<div class="main">
			<ul>
				
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
			</ul>
		</div>
		<div class="layout"></div>
		<div class="popup">
			<ul>
				<li><a href="javascript:;" id="zreo">0000</a></li>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#zreo").click(function(){
				$(".popup").show();
				$(".layout").show();
				$("html").css('height','100%');
				$(".view").css('overflow','hidden');

			})
		})
	</script>
	
</body>
</html>

　　

posted @ 2017-07-19 16:20  对方屌丝正在输入中  阅读(179)  评论(0)    收藏  举报