Javascript - 팝업 링크를 클릭하면 아래 링크가 열립니다.

Question

불명확 한 제목에 대해 사과드립니다. 더 간결한 설명을 작성할 수 없습니다.

나는 목록을 가지고 있고, 각 목록 항목 내에서 사용하여 다음 jQuery를 othersiwse 숨겨진 <div>를 여는 링크입니다 : 모든의 클래스 인

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

rerank_details 사업부의 ID 인 및 showreranks을 모래밭.

이

는 사업부의 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를 화면 중앙에 배치하는 것을 원하지 않습니다. 대신 클릭 한 링크 바로 아래에 배치하고 싶습니다. 페이지에 많은 링크가있을 수 있으며 하나가 다른 링크보다 아래에 있고 수직 거리가 불규칙 할 수 있습니다. 어떻게해야합니까?

Answer 1

나는 이것이 당신이 무엇을하려고 생각합니다. 애니메이션은 모두 수정되었습니다.

Answer 2

DOM의 일반적인 흐름 내에있을 필요가없는 경우 절대 위치 지정과 이벤트 객체 만 사용하십시오. http://jsfiddle.net/SO_AMK/r7ZDm/

Answer 3

답이 이미 받아 들여졌다, 그러나 아마 this is a cleaner version :

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