今天接触的一个页面，页面出现弹窗之后，发现滑动弹窗的内容，底部的东西也会跟着滑动，于是自己写了一个小demo。(小样代码写的很low，样式也很丑，不过主要是功能实现就行了，哈哈哈哈！)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>弹窗</title>
<style type="text/css">
.mask {
position:fixed;
top:0;
left:0;
100%;
height: 100%;
background:#000;
opacity:0.5;
display:none;
z-index: 99;
}
.main {
z-index: 1;
position:relative;
}
.content {
position: fixed;
left: 0;
bottom: 20px;
100%;
max-height: 450px;
font-size: 14px;
background: #fff;
z-index: 1001;
overflow: auto;
display:none;
}
</style>
</head>
<body>
<div class="main">
<a class="num">点我</a>
<p>抽奖1</p>
<p>抽奖2</p>
<p>抽奖3</p>
<p>抽奖4</p>
<p>抽奖5</p>
<p>抽奖6</p>
<p>抽奖7</p>
<p>抽奖8</p>
<p>抽奖9</p>
<p>抽奖10</p>
<p>抽奖11</p>
<p>抽奖12</p>
<p>抽奖13</p>
<p>抽奖14</p>
<p>抽奖15</p>
<p>抽奖16</p>
<p>抽奖17</p>
<p>抽奖18</p>
<p>抽奖19</p>
<p>抽奖20</p>
<p>抽奖21</p>
<p>抽奖22</p>
<p>抽奖23</p>
<p>抽奖24</p>
<p>抽奖25</p>
<p>抽奖26</p>
<p>抽奖27</p>
<p>抽奖28</p>
<p>抽奖29</p>
<p>抽奖30</p>
</div>
<div class="mask"></div>
<div class="content">
<div class="touch">
<p>型号1</p>
<p>价格1</p>
<p>型号2</p>
<p>价格2</p>
<p>型号3</p>
<p>价格3</p>
<p>型号4</p>
<p>价格4</p>
<p>型号5</p>
<p>价格5</p>
<p>型号6</p>
<p>价格6</p>
<p>型号7</p>
<p>价格7</p>
<p>型号8</p>
<p>价格8</p>
<p>型号9</p>
<p>价格9</p>
<p>型号10</p>
<p>价格10</p>
<p>型号11</p>
<p>价格11</p>
<p>型号12</p>
<p>价格12</p>
<p>型号13</p>
<p>价格13</p>
<p class="close">关闭</p>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(".num").on("click",function(){
$(".mask").show();
$('.mask').bind("touchmove",function(e){
e.preventDefault();
});
$(".content").show();
$(".main").css({"position":"fixed"});
})
$(".close").on("click",function(){
$(".mask").hide();
$(".content").hide();
$(".main").css({"position":"relative"});
})
</script>
</html>
之前，如果是单个蒙层的话，可以直接用
$('.mask').bind("touchmove",function(e){
e.preventDefault();
});
来阻止默认事件，这样底部就不会滑动。
但是为了弹窗里面的内容也滑动，之前对弹窗也用了preventDefault()，但是弹窗内容就滑不动了。在网上百度看到，可以让弹窗出来时，让下面的页面fixed定位，弹窗消失时候，再还原relative定位。 试了一下，果然可以。
可能表述的不是很好，不过把小样复制下去，用手机试一下，应该很好懂了。