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>
