怎么在以下代码的div中添加一个关闭按钮，或者说鼠标点击页面的其它地方div自动隐藏

发布网友发布时间：2022-05-29 14:25

共1个回答

热心网友时间：2023-10-21 05:52

（一）加入关闭按钮只要再加一个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" />

代码如下：

上个单一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>