javascript 利用冒泡机制显示与隐藏模态框 

 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>

 

posted @ 2018-04-19 19:34  叶子玉  阅读(918)  评论(0)  编辑  收藏  举报