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>
