今天接触的一个页面，页面出现弹窗之后，发现滑动弹窗的内容，底部的东西也会跟着滑动，于是自己写了一个小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; width: 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; width: 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定位。 试了一下，果然可以。
可能表述的不是很好，不过把小样复制下去，用手机试一下，应该很好懂了。