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 { 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>