A simple example of jquery realizing the click pop-up layer effect_jquery

In practical applications of pop-up layers, we often encounter a large number of pop-up layer effects. Below I will make a simple pop-up layer effect example based on jquery. Friends who are interested can refer to it.

The effect code is as follows:

The following is the core code in the popup layer

Copy the code The code is as follows:

< ;script type="text/javascript">
//Gradient popup layer
$(document).ready(function(){
var speed = 600;//Animation speed
$( "#race a").click(function(event){//Bind event processing
event.stopPropagation();
var offset = $(event.target).offset();//Cancel event Bubble
$("#racePop").css({ top:offset.top $(event.target).height() "px", left:offset.left });//Set the popup layer position
$("#racePop").show(speed);//Animation display
});
$(document).click(function(event) { $("#racePop").hide( speed) });//Click on the blank area to hide
$("#racePop").click(function(event) { $("#racePop").hide(speed) });//Click to pop up The layer hides itself

});

Full example

Copy code The code is as follows:

Click

Here is the pop-up layer effect