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

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

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

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

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


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


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


来个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;
});
【热门文章】
【热门文章】