求代码：点击任意空白处关闭DIV

比如：
<a href='#'>详情</a>
点击“详情”，在“详情”的正下方出现一个漂浮的DIV 显示详细信息，
问题：如何实现点击除DIV 之外的任意地方都关闭DIV？求代码！JS JQ都行，要能通用，因为一个页面很多处这样的东西！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

PS：自己也写了，给document加onlick事件  然后判断事件对象的ID是不是DIV的ID 感觉不好，求更好的！
貌似除了这个方法，没其他了吧~~要么就是给div加一个显示的时限，10秒钟以后自动关闭，但是也还是得加入document的click事件，判断是否点击的是那个div
你说的方法一般大家也都这么想，加个onclick事件么。要么用setTimeout给div一个固定的显示时限，或者你给显示的div加一个关闭的小图标，点击才消失。
你都说了页面很多处这样的东西，如果你一下子点击很多，出现了很多弹出的div，那么处理起来会很乱的，个人感觉。
先得到div的坐标接着获得鼠标点击的坐标再判断  不知道是否可行？
用jquery，想隐藏谁的时候就直接 $("#id").hide();// id是要隐藏对象的id
就可以了
<html>
<head>
<script type="text/javascript">
document.onclick=function(){
document.getElementById("div").style.display="none";
}
function clickDiv(div){
div.style.display="";
var b = window.event;
b.cancelBubble = true;
}
</script>
</head>
<body>
<div onclick="clickDiv(this)" id="div" style="background-color:yellow;border:1px solid red;width:300px;height:200px;position:absolute;left:300px;top:200px;">
</div>
</body>
</html>
给你推荐个方法：
在显示详细信息的DIV的下面，建一个透明的全屏DIV，在该DIV上加onclick事件即可
<div style="z-index:1100;background-color: rgb(102, 102, 102); opacity: 0.3; display: block;..." onclick="document.getElementById('aaa').style.display='none'"></div>
<div id="aaa">详细信息</div>
$(document).ready(function(){
$(document).bind('click', Hide);
});
function Hide(e){
if($(e.target)[0].id =="Pop" )
return;
$("#Pop").hide();
}这样子. 还要注意Pop的子元素冒泡要排除掉.
如果还要进一步优化的话, 就在hide了以后unbind这个click事件, 在点a show()的时候再bind. 效率层面上的优化..如果页面不复杂就不必要了
这个很简单。在弹出加一个浮动的满屏的DIV ，设置DIV的透明度为 1 ，单单击这个DIV的时候关闭就可以了~
是不是很简单，如果不懂的话，我可以写代码出来~~~
你的判断难是指除DIV 之外的任意地方难，还是指判断哪个DIV隐藏难？
加个满屏的DIV  总感觉不好会出事 hoho
还是10楼有点靠谱，
现在求个好用的ToolTip 插件简单点体积小就行
1点结贴。。
jQuery Plugin - Tooltip .
jTip - The jQuery Tool Tip .
clueTip .
BetterTip .
Flash Tooltips using jQuery .
ToolTip .
更多插件参考http://blog.csdn.net/IBM_hoojo/archive/2010/06/24/5691142.aspx<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>floatDiv2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
     #show {
     border: 1px solid black;
     background-color: #E5F0FB;
     position: absolute;
     width: 150px;
     height: 100px;
     display: none;
     }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
     $(function () {
     $(document).click(function (e) {
     if (e.target.id != "show") {
     $("#show").hide();
     }
     });
     $("a").click(function (e) {
     $("#show").css({left: e.clientX, top: e.clientY}).show();
     return false;//防止冒泡
     });
     });
    </script>
      </head>

  <body>
   <a href="#">click me</a>
    <div id="show"></div>
  </body>
</html>
<html>
<head>
<script type="text/javascript">
document.onclick=function(){
var div = document.getElementById("div");
var loc = getLoc(div);
var e = window.event;
if ((e.clientX >= loc.locX && e.clientX <= (parseInt(loc.locX) + parseInt(div.offsetWidth))) && (e.clientY >= loc.locY && e.clientY <= (parseInt(loc.locY) + parseInt(div.offsetHeight)))){
div.style.display = "";
} else {
div.style.display = "none";
}
}
var loc = function() {
this.locX = 0;
this.locY = 0;
}
function getLoc(el){
var x = el.offsetLeft;
var y = el.offsetTop;
while(el = el.offsetParent){
x += el.offsetLeft;
y += el.offsetTop;
}
var divLoc = new loc();
divLoc.locX = x;
divLoc.locY = y;
return divLoc;
}
</script>
</head>
<body>
<div id="div" style="background-color:yellow;border:1px solid red;width:300px;height:200px;position:absolute;left:300px;top:200px;">
</div>
</body>
</html>根据鼠标点击位置判断是否在div内
满屏的Div很多插件都在用
jQuery的fancybox效果，关闭弹出的放大图片，就是用的满屏DIV