(一)加入关闭按钮只要再加一个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>