使用Javascript - 使弹出的div开放点击以下链接

Question

很抱歉的标题不清楚，我不能制定一个更好的简要说明。

我有一个列表，每个列表项目中是使用打开一个othersiwse隐藏<div>以下的jQuery的链接：

$('a.showreranks').click(function() { 
     $('body').append('<div class="overlay"></div>'); 
     $('#rerank_details').slideToggle(300); 
     return false; 
     }); 

rerank_details是的div id和showreranks作为类的所有链接。

这是div的CSS：

#rerank_details { 
display: none; 
background: white; 
position: absolute; 
border: 1px solid black; 
border-radius: 6px; 
width: 305px; 
padding: 15px; 
overflow: hidden; 
top: 50%; 
left: 50%; 
height: 200x; 
text-shadow: none; 
z-index: 50; 
} 

所以，你看，它打开时打开的DIV居中。然后填充与被点击的列表项相关的信息，但不需要担心。我需要帮助的是以下内容 - 我不希望div在屏幕上居中。相反，我希望它位于点击链接的正下方。请注意，页面上可能有很多链接，一个在另一个的下方，垂直距离可能不规则。我该如何做到这一点？

Answer 1

我认为这是你正在尝试做的： http://jsfiddle.net/SO_AMK/r7ZDm/

Answer 2

，如果没有它是DOM的正常流程中只使用绝对定位和事件对象。

function(event){ 
    var box = //get a handle to box 
    box.style.position = 'aboslute'; 
    box.style.left = event.page.x; 
    box.style.top = event.page.y; 
} 

Answer 3

答案已被接受，但也许this is a cleaner version。动画都是固定的。