前端页面弹框遮罩禁止页面滚动

完整测试源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .main-content{
                position:relative;
                width:100%;
                background-color:#ccc;
                height:2000px;
            }
 
            .main-content .trigger{
                width:200px;
                height:100px;
                font-size:30px;
                color:#000;
            }
 
            .main-content .bottom{
                position:absolute;
                bottom:0;
                left:0;
                width:100%;
                height:200px;
                background-color:red;
            }
 
            .black-shield{
                position:fixed;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background-color:rgba(10,10,10,0.4);
                z-index:10;
            }
 
            .black-shield .info{
                font-size:40px;
                color:#000;
                border:1px solid;
                z-index:20;
            }
        </style>
    </head>
    <body>
        <div class="main-content">
            <button id="trigger" class="trigger">开/关</button>
            <div class="bottom"></div>
        </div>
        <div id="shield" class="black-shield" style="display:none;">
            <div id="info" class="info">当前黑幕弹出后，页面应该不可滑动，点击当前文本，关闭黑幕</div>
        </div>
         
        <script>
            function test2(){
                var showShield=false;
                var shield=document.getElementById("shield");
                var trigger=document.getElementById("trigger");
                var info=document.getElementById("info");
                var body=document.querySelector("body");
                var html=document.querySelector("html");
 
                //点击显示黑幕@ www.xuepai.net
                trigger.addEventListener("click",function(){
                    shield.style.display="block";
                },false);
 
                //点击关闭黑幕
                info.addEventListener("touchstart",function(){
                    shield.style.display="none";
                },false);
 
                //在黑幕层阻挡touch事件@ www.haoshilao.net
                shield.addEventListener("touchstart",function(e){
                    e.stopPropagation();
                    e.preventDefault();
                },false);
            }
 
            test2();
        </script>
    </body>
</html>

 

posted @ 2026-01-06 20:34  zxcva  阅读(10)  评论(0)    收藏  举报