点击特定div之外的任何地方，该div隐藏

最新推荐文章于 2021-03-25 19:23:27 发布

Andyzty

最新推荐文章于 2021-03-25 19:23:27 发布

阅读量3.2k

点赞数

分类专栏： JavaEE开发 Java开发笔记

本文链接：https://blog.csdn.net/fengshizty/article/details/23340273

版权

Java开发笔记同时被 2 个专栏收录

107 篇文章 72 订阅

订阅专栏

JavaEE开发

54 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
  <style type="text/css">
   * { padding:0; margin:0; }
   #box { position:relative; margin:50px; }
   #pop { display:none; position:absolute; left:200px; top:100px; width:120px; height:120px; border:2px solid #ccc; background:#eee; }
  </style>
  <script type="text/javascript">
    window.οnlοad=function(){
      var oBox=document.getElementById("box");
      var obj=document.getElementById("pop");
      var oBtn=document.getElementById("click");
      
      oBtn.οnclick=function(){
        obj.style.display="block";
      }    
      document.οnclick=function(event){
        //
        var e=event || window.event;//兼容ie和非ie的event
        var aim=e.srcElement || e.target; //兼容ie和非ie的事件源
        //
        if(e.srcElement){
         var aim=e.srcElement;
          if(aim!=oBtn && aim!=obj){
            obj.style.display="none";
          }
        }else{
          var aim=e.target;
          if(aim!=oBtn && aim!=obj){
            obj.style.display="none";
          }
        }
      }     
    }
  </script>
</head>
<body>
	<div id="box">
    <a href="javascript:;" id="click" >点击弹出</a>
    <div id="pop">
      弹出层内容呢
    </div>
  </div>
</body>
</html>

Andyzty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击特定div之外的任何地方，该div隐藏

* { padding:0; margin:0; } #box { position:relative; margin:50px; } #pop { display:none; position:absolute; left:200px; top:100px; width:120px; height:120px; border:2px solid #ccc; background:#e
复制链接

扫一扫