如何当弹出的div失去焦点的时候自动隐藏。

Question

比如说有一个div，点击按钮的时候弹出，当鼠标点击别的地方的时候它自动消失。

$("#button-id").click(function(){
  $("#pop-div").css("z-index",100);
  ...
});

就像jquery的日历插件那样，当鼠标点击别的地方的时候，它就自动消失了。

Answer 1

有个很土鳖的办法，你在document.body上注册一个click事件的函数，然后判断下当前的click的事件的srcElement是否等于那个div，不是的话就消失。

Answer 2

来个jquery写的:

演示地址 -> http://jsfiddle.net/MagV4/

HTML:

<div id="box">
</div>
<input type="button" id="button" value="show" />

CSS:

body {height:700px;}/*为了便于测试将body的高度拉大*/
#box {width:100px;height:100px;background:blue;display:none;}

jquery:

$("#button").click(function(event){
     $("#box").show();
    event.stopPropagation();//阻止冒泡
});
$("body").click(function(){
     $("#box").hide();
})
$('#box').click(function(){
     return false;
});

Answer 3

<div>弹出的时候让他聚焦到此div上 然后失去焦点时hide（）
这样blur就会有用了