Javascript -使弹出窗口div在单击的链接下打开

Question

很抱歉标题不清楚，我不能用一个更好的简洁的解释。

我有一个列表，在每个列表项中都有一个链接，它使用以下jQuery打开另一个隐藏的<div>：

$('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

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

Answer 3

如果不需要在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;
}