(一)加入关闭按钮只要再加一个onclick 时间就行了,turnoff(‘ ’)里的参数可以改变。代码如下
<html> <meta charset="gbk"> <head> <script> var hide=function() { var divs=document.getElementsByTagName("div"); for (var i=0;i<divs.length ;i++ ) { divs[i].style.display="none"; } } window.onload=function(){ hide(); var a=document.getElementsByTagName("td"); for(var i = 0; i < a.length; i++) { a[i].onclick = function(oEvent) { oEvent = oEvent || event;hide(); document.getElementById("div"+this.id).style.display="block"; } } } // 加入关闭操作的函数 function turnoff(obj){ document.getElementById(obj).style.display="none"; } </script> </head> <body> <table > <tr> <td id="1"> <a href="#">弹出层1</a> </td> <td id="2"> <a href="#">弹出层2</a> </td> <td id="3"> <a href="#">弹出层3</a> </td> </tr> </table> <div id="div1" style="background:#0F0; width:200px; height:100px;"> <p>层1 </p><a href="#" onclick="turnoff('div1')">点击关闭</a> </div> <div id="div2" style="background:#00F;width:200px; height:100px;"> <p>层2 </p><a href="#" onclick="turnoff('div2')">点击关闭</a> </div> <div id="div3" style="background:#F00;width:200px; height:100px;"> <p>层3 </p><a href="#" onclick="turnoff('div3')">点击关闭</a> </div> </body> </html>
(二)点击div之外的地方隐藏div,方法多种,但都是通过 js操作到事件源,判断这个事件源的ID是不是在要隐藏的div 即点击事件发生的范围是否在div之外,但前提是事件不能和你前面写的js事件发生冲突。 注册一个document.onclick或者document.onmousedown事件来监控鼠标点击div以外的区域时事件,你给这个div的id属性赋一个页面唯一的值比如<div id="tAnChu" />
代码如下:
document.onclick = function (event) { var e = event || window.event; var elem = e.srcElement||e.target; while(elem) { if(elem.id == "tAnChu") { return; } elem = elem.parentNode; } //隐藏div的方法 HiddenDiv(); }
上个单一div事例:
<html> <head> <script type='text/javascript'> window.onload = function(){ document.onclick = function(e){ e = e || window.event; var dom = e.srcElement|| e.target; if(dom.id !="tAnChu" && document.getElementById("tAnChu").style.display == "block") { document.getElementById("tAnChu").style.display = "none"; } }; }; function openTanChu(e) { document.getElementById("tAnChu").style.display = "block"; e = e||window.event; if(+'\v1') { e.stopPropagation(); } else { e.cancelBubble = true; } } </script> <style> #tAnChu{ position:fixed; left:40%; top:100px; background-color:#ccc; width:200px; height:120px; display:none; } </style> </head> <body> <input type="button" value="打开" onclick="openTanChu(event)" /> <div id="tAnChu"> 这是弹出层 </div> </body>