Jquery implements a simple example of clicking the pop up layer effect

Pop-up layer in the practical application we often encounter a lot of pop-up layer effect, I will make a simple pop-up layer effect based on jquery example, you are interested in reference.

The effect code is as follows:
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201403/20140303093557.png ">

Below the pop-up layer is the core code

<script type="text/javascript">
//Gradient ejection layer
$(document).ready(function(){
 var speed = 600;//Speed of the animation
 $("#race a").click(function(event){//Binding event handling
  event.stopPropagation();
  var offset = $(event.target).offset();//Cancel event bubbles
  $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//Set the pop-up layer location
  $("#racePop").show(speed);//Animation display
 });
 $(document).click(function(event) { $("#racePop").hide(speed) });//Click the blank area to hide
 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//Click the pop-up layer to hide itself

});
</script>

<!--Gradient ejection layer -->
<div id="race"><a href="#"> Click on the </a></div>
<div id="racePop" class="raceShow"> Here is the pop-up layer effect </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
//Gradient ejection layer
$(document).ready(function(){
 var speed = 600;//Speed of the animation
 $("#race a").click(function(event){//Binding event handling
  event.stopPropagation();
  var offset = $(event.target).offset();//Cancel event bubbles
  $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//Set the pop-up layer location
  $("#racePop").show(speed);//Animation display
 });
 $(document).click(function(event) { $("#racePop").hide(speed) });//Click the blank area to hide
 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//Click the pop-up layer to hide itself
});
</script>
<style>
body{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;background:#fff}
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.clear{height:0;overflow:hidden;clear:both;}

#race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;margin:10px auto}
.raceShow{background-color:#f1f1f1;border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;}
</style>