点击其他地方可以隐藏弹出层效果
本章节介绍一下一种在实际应用中常见的效果。
那就是点击一个按钮弹出一个层，然后再点击弹出层除外的其他地方的时候可以隐藏此层。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
body{font-size:9pt;}
#race{
display:block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
background:#CCC;
border:#555 1px solid;
}
.raceShow{
background-color:#f1f1f1;
border:solid 1px #ccc;
position:absolute;
display:none;
width:300px;
height:100px;
padding:5px;
font-size:12px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var speed = 600;
$("#race a").click(function(event){
event.stopPropagation();
var offset = $(event.target).offset();
$("#racePop").css({
top:offset.top + $(event.target).height() + "px",
left:offset.left
});
$("#racePop").show(speed);
});
$(document).click(function(event) {
if(event.target==$("#racePop")[0]){
return false;
}
$("#racePop").hide(speed)
});
});
</script>
</head>
<body>
<div id="race">
<a href="#">查看效果</a>
</div>
<div id="racePop" class="raceShow">前端教程网欢迎您</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
1.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
2.var speed = 600，设置动画执行的时长。
3.$("#race a").click(function(event){})，为连接a注册click事件处理函数。
4.event.stopPropagation()，阻止事件冒泡效果，方式事件传递到上级元素，否则就会产生点击产生弹出层，然后弹出层又消失的现象。
5.var offset = $(event.target).offset()，获取链接a元素距离文档顶端的距离。
6.$("#racePop").css({
top: offset.top + $(event.target).height() + "px",
left: offset.left
})，设置弹出层的弹出位置。
7.$("#racePop").show(speed)，显示弹出层。
8.return false，去掉点击链接a的默认动作，比如链接跳转动作。
9.$(document).click(function(event) { if(event.target==$("#racePop")[0]){
return false;
}
$("#racePop").hide(speed)
})，为document注册click事件处理函数，并且判断点击的是否是弹出层本身，如果是则跳出函数，否则隐藏此层。
二.相关阅读:
1.stopPropagation()可以参阅jQuery event.stopPropagation()一章节。
2.target可以参阅jQuery event.target一章节。
3.offset()可以参阅jQuery offset()一章节。
4.return false可以参阅javascript return false一章节。
点击其他地方可以隐藏弹出层效果，这样的场景在实际项目中还是用的比较多的，关于点击其他地方可以隐藏弹出层效果就介绍到这了。
点击其他地方可以隐藏弹出层效果属于前端实例代码，有关更多实例代码大家可以查看。