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

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

2024-11-23 01:22:51

推荐回答（1个）

回答1：

（一）加入关闭按钮只要再加一个onclick 时间就行了，turnoff（‘ ’）里的参数可以改变。代码如下












弹出层1


弹出层2


弹出层3





层1 
点击关闭

层2

点击关闭

层3

点击关闭

（二）点击div之外的地方隐藏div，方法多种，但都是通过 js操作到事件源，判断这个事件源的ID是不是在要隐藏的div 即点击事件发生的范围是否在div之外，但前提是事件不能和你前面写的js事件发生冲突。注册一个document.onclick或者document.onmousedown事件来监控鼠标点击div以外的区域时事件，你给这个div的id属性赋一个页面唯一的值比如

代码如下：

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事例：


    
  
   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;
            }
             
        }
    
    



    
        这是弹出层