1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="gb2312" />
5 <title></title>
6 <style>
7 span {
8 color:red;
9 }
10 #test {
11 display:none;
12 position:absolute;
13 left:30px; top:30px;
14 width:200px;
15 border:1px solid red;
16 background:#fff;
17 }
18 </style>
19 </head>
20 <body>
21 <span id="span">打开层</span>
22 <div>1-1111111111</div>
23 <div>1-1111111111</div>
24 <div>1-1111111111</div>
25 <div>1-1111111111</div>
26 <div>1-1111111111</div>
27 <div id="test">
28 <a href="#">123</a>
29 浮层，点击这个浮层以外的区域，都可以隐藏这个浮层
30 <div>
31 <script>
32 function $(o){return document.getElementById(o)}
33 $(‘span‘).onclick = function(e){
34 $(‘test‘).style.display = ‘block‘;
35 e = e || window.event;
36 if (e.stopPropagation) {
37 e.stopPropagation();
38 } else {
39 e.cancelBubble = true;
40 }
41
42 }
43 var odiv = $(‘test‘);
44 document.onclick = function(e){
45 e = e || window.event;
46 var s = e.target || e.srcElement;
47 if( e.srcElement ){ //ie
48 if( !(s == odiv || odiv.contains(s)) ){
49 odiv.style.display = ‘none‘;
50 }
51 }else{
52 var res = odiv.compareDocumentPosition(s);
53 if( !(s == odiv || res == 20 || res == 0) ){
54 odiv.style.display = ‘none‘;
55 }
56 }
57
58 }
59
60
61 </script>
62 </body>
63 </html>
参考资料：
http://www.jb51.net/article/82847.htm
时间： 2025-01-21 19:34:17