蒙版 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         html, body{
13             width: 100%;
14             height: 3000px;
15         }
16 
17         #panel{
18             width: 100%;
19             height: 100%;
20             background-color: #000;
21             opacity: .4;
22 
23             position: absolute;
24             left: 0;
25             top: 0;
26 
27             display: none;
28         }
29 
30         #login{
31             width: 300px;
32             height: 300px;
33             background-color: skyblue;
34             border-radius: 5px;
35 
36             position: fixed;
37             left: 50%;
38             top: 50%;
39             transform: translate(-150px, -150px);
40 
41             display: none;
42         }
43     </style>
44 </head>
45 <body>
46     <button id="btn">立即登录</button>
47     <div id="panel"></div>
48     <div id="login"></div>
49 <script src="js/MyTool.js"></script>
50 <script>
51     window.addEventListener('load', function (ev) {
52         // 1. 监听按钮的点击
53         myTool.$('btn').addEventListener('click', function () {
54 
55             // 阻止冒泡
56             if(event && event.stopPropagation){ // w3c标准
57                 event.stopPropagation();
58             }else{ // IE系列 IE 678
59                 event.cancelBubble = true;
60             }
61 
62             // 1.1 显示面板和蒙版
63             myTool.$('panel').style.display = 'block';
64             myTool.$('login').style.display = 'block';
65 
66             // 1.2 隐藏滚动条
67             document.body.style.overflow = 'hidden';
68         });
69 
70         // 2. 点击文档
71         document.addEventListener('click', function (ev1) {
72             var e = ev1 || window.event;
73 
74             // 2.1 获取点击标签
75             console.log(e.target);
76             var targetId = e.target ? e.target.id : e.srcElement.id;
77 
78             // 2.2 判断
79             if(targetId !== 'login'){
80                 myTool.$('panel').style.display = 'none';
81                 myTool.$('login').style.display = 'none';
82 
83                 document.body.style.overflow = 'auto';
84             }else {
85                 window.location.href = 'http://www.itlike.com';
86             }
87         })
88     }, false)
89 </script>
90 </body>
91 </html>

 

posted @ 2019-07-20 09:41  疏影横斜水清浅  阅读(146)  评论(0)    收藏  举报