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;
}

Javascript - 在点击链接下方弹出窗口div

3 个答案: