比如说有一个div,点击按钮的时候弹出,当鼠标点击别的地方的时候它自动消失。
$("#button-id").click(function(){
$("#pop-div").css("z-index",100);
...
});
就像jquery的日历插件那样,当鼠标点击别的地方的时候,它就自动消失了。
有个很土鳖的办法,你在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;
});
<div>弹出的时候让他聚焦到此div上 然后失去焦点时hide()
这样blur就会有用了
正文完