1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 body,html {
8 height: 100%;
9 padding: 0;
10 margin: 0;
11 }
12 .mask {
13 width: 100%;
14 height: 100%;
15 position: fixed;
16 top: 0;
17 left: 0;
18 display: none;
19 background: rgba(0, 0, 0, 0.6);
20 }
21 .login {
22 width: 400px;
23 height: 300px;
24 cursor: pointer;
25 background-color: #fff;
26 margin: 200px auto;
27 }
28 </style>
29 </head>
30 <body>
31 <div class="mask">
32 <div class="login" id="login"></div>
33 </div>
34 <a href="#">注册</a>
35 <a href="#">登陆</a>
36
37 <script src="animate.js" charset="utf-8"></script>
38 <script type="text/javascript">
39 var mask = document.getElementsByClassName("mask")[0];
40 var a = document.getElementsByTagName("a")[1];
41
42 a.onclick = function(event){
43 //显示模态框
44 show(mask);
45 //阻止冒泡
46 event = event || window.event;
47 if (event && event.stopPropagation) {
48 event.stopPropagation();
49 }else {
50 event.cancelBubble = true;
51 }
52 }
53
54 document.onclick = function(event){
55 //获取点击按钮后传递过来的值。
56 event = event || window.event;
57 //兼容获取事件触动时，被传递过来的对象
58 var aaa = event.target ? event.target : event.srcElement;
59 //判断目标值的ID是否等于login，如果等于不隐藏盒子，否则隐藏盒子。
60 if (aaa.id !== "login") {
61 mask.style.display = "none";
62 }
63 }
64 </script>
65
66 </body>
67 </html>