移动端弹出页面穿透问题
解决方案
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>
