1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>网页特效展示中心</title>
5 <style type="text/css">
6 #testa,#testa2{position:relative;}
7 #pop,#pop2 { width:100px; height:130px; position:absolute; left:0px; top:20px; border:solid red 1px;background:white; z-index:9999;}
8 </style>
9 </head>
10
11 <body>
12 <script type="text/javascript" src="cxx/jquery.min.js"></script>
13 <script type="text/javascript">
14 function toggle(id)
15 {
16 var id = document.getElementById(id);
17 if(id.style.display == 'none')
18 {
19 id.style.display = 'block'
20 }
21 else
22 {
23 id.style.display = 'none';
24 }
25 }
26
27 function dealBlankDivHide(e, id ,destinationid)
28 {
29 var target = $(e.target);
30 if(target.closest("#"+id).length == 0){
31 var id = document.getElementById(destinationid);
32 if(id.style.display == 'block')
33 {
34 id.style.display = 'none'
35 }
36 }
37 }
38
39 $(function(){
40 $(document).bind("click",function(e){
41 dealBlankDivHide(e, 'testa','pop');
42 dealBlankDivHide(e, 'testa2','pop2');
43 })
44 })
45
46
47 </script>
48 <span id="testa">
49 <a onclick="toggle('pop')">onclick</a>
50 <div id="pop" style="display:none;">
51 <input type="checkbox" name = "test1"/>test1
52 <input type="checkbox" name = "test2"/>test2
53 <input type="checkbox" name = "test3"/>test3
54 <input type="checkbox" name = "test4"/>test4
55 <input type="checkbox" name = "test5"/>test5
56 </div>
57 <span>
58 <span id="testa2">
59 <a onclick="toggle('pop2')">onclick</a>
60 <div id="pop2" style="display:none;">
61 <input type="checkbox" name = "test1"/>test11
62 <input type="checkbox" name = "test2"/>test22
63 <input type="checkbox" name = "test3"/>test33
64 <input type="checkbox" name = "test4"/>test44
65 <input type="checkbox" name = "test5"/>test55
66 </div>
67 <span>
68 </br>
69 fsdfsdfsfsfsdfsfddf</br>
70 fsdfsdfsfsfsdfsfddf</br>
71 fsdfsdfsfsfsdfsfddf</br>
72 fsdfsdfsfsfsdfsfddf</br>
73 fsdfsdfsfsfsdfsfddf</br>
74 fsdfsdfsfsfsdfsfddf</br>
75
76
77 </body>
78 </html>
