弹出蒙版后禁止底层滑动 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title></title>
 7     <link rel="stylesheet" href="">
 8 </head>
 9 <body>
10 
11     <div>
12         <p class="checkMore">点击-查看更多</p>
13     </div>
14 
15 <!-- 蒙版 -->
16     <div class="allTuan" style="display: none;">
17         <span class="closeCheck"> X </span>
18         ......
19     </div>
20 
21     <script>    
22 //在touchmove时禁用浏览器默认事件，在遮罩弹出时禁用，遮罩关闭时释放
23         // 点击查看更多
24         var flag = 0;  //标识，初时为0;
25         $(".checkMore").click(function(){
26             $('.allTuan').show();  //显示蒙版
27             flag = 1; 
28         })
29         document.addEventListener("touchmove",function(event){   //监听滚动事件
30             if(flag == 1){   //判断是遮罩层时执行，禁止滑动
31                 event.preventDefault();    // 禁止浏览器默认行为——关键
32             }
33         })
34         // 关闭弹框
35         $('.closeCheck').click(function(){
36             $('.allTuan').hide();    // 遮罩层隐藏 
37             flag = 0;   // 重置为0 
38         })
39     </script>
40     
41 </body>
42 </html>

 

posted @ 2018-09-14 15:33  昵称已被使用。  阅读(1054)  评论(0)    收藏  举报