点击其他地方可以隐藏弹出层效果

快乐打工仔 分类:实例代码

本章节介绍一下一种在实际应用中常见的效果。

那就是点击一个按钮弹出一个层,然后再点击弹出层除外的其他地方的时候可以隐藏此层。

代码实例如下:

<!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一章节。

点击其他地方可以隐藏弹出层效果,这样的场景在实际项目中还是用的比较多的,关于点击其他地方可以隐藏弹出层效果就介绍到这了。

点击其他地方可以隐藏弹出层效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容