jquery实现点击弹出层效果的简单实例_jquery

效果代码如下：

在 弹出层 中下面是核心代码
代码如下:

// 渐变弹出层
$(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) { $("#racePop").hide(speed) });//单击空白区域隐藏
$("#racePop").click(function(event) { $("#racePop").hide(speed) });//单击弹出层则自身隐藏

});


完整实例
代码如下:

点击
这里是弹出层效果

// 渐变弹出层
$(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) { $("#racePop").hide(speed) });//单击空白区域隐藏
$("#racePop").click(function(event) { $("#racePop").hide(speed) });//单击弹出层则自身隐藏

});