레이어 팝업 위치?? 여러개의 li 각각 우측으로
본문
질문제목도 어떻게 써야 할지 모르겠네요
가로 4개씩 아래쪽으로 쭉 출력되는 갤러리? 형식의 구조입니다.
<div>
<li id="abc_1"><span>버튼</span>이미지/글</li>
<li id="abc_2"><span>버튼</span>이미지/글</li>
<li id="abc_3"><span>버튼</span>이미지/글</li>
<li id="abc_4"><span>버튼</span>이미지/글</li>
.
.
.
.
</div>
여기에서 이미지/글 위에 있는 버튼들이 각각 존재하구요.
이 버튼들을 클릭하면 각 내용에 해당하는 내용의 팝업이
화면 중앙에 레이어 팝업으로 뜨고 있습니다.
이 중앙에 뜨는 레이어 팝업의 위치를 각각 li 영역의 우측으로 나오게 하고 싶은데요.
event.pageX, Y 등등은 사용할 수 없는 상황이라
저 li의 위치를 좌표로 얻어서 topr과 left로 불러오고자합니다.
그런데 li각각을 지정못해서(??) 제일 첫번째 li위치에서만 팝업이 뜹니다.ㅠㅠ
아래 소스를 조금만 수정하면 될것 같은데
li의 위치를 각각 얻어서 top과 left로 넘길 수 있을까요??
var
$this = $(this),
//$w = $(window);
var lis = $('[id^="abc_"]');
var pos = lis.position();
$this.css({
position: "absolute",
top: (pos.top) + "px",
left: (pos.left) + "px"
});
이렇게 넣었더니 top,50 left, 0(첫번째 li 위치값)으로 고정되어버리네요ㅠㅠ
답변 6
var lis = $(this).closest('li');
var pos = lis.position();
$(this).css({
position: "absolute",
top: (pos.top) + "px",
left: (pos.left) + "px"
});
아흑 답변감사합니다. 답변주신대로 해봐도 제일 첫번째 li 위치값만으로 고정되어버리네요ㅠㅠ
li {position:relative;}
감싸고 해보셨나요?
넹!! 이미 relative 선언되어있어요ㅠㅠ 문제가 저 팝업을 불러오는 div가 li안에 없고 파일 최하단에 고정되어있는데 이걸 바꿀수가 없는 상황입니다.ㅠㅠ
이것도 안되더라구요ㅠㅠ
클릭했을때 position값을구한다면
this로 구하면 되지않나요? id로 구한다면 for문으로 각각의 위치를 지정해줘야 할거에요
this로 해버리니까 뜨게될 팝업창을 인식하는거라 0, 0으로 잡혀버리구
id값을 가진 li를 for문으로 돌리고 그걸 담아서 넘겨야 할것 같은데
도저히 감이 안와서요ㅜㅜ
팝업을 띄울 때.. 'abc_1' 의 버튼으로 호출한 것인지, 'abc_2'의 버튼으로 호출한 것인지에 대한 정보를 팝업에 전달해야 됩니다.
팝업, 버튼 클릭을 통한 팝업 호출, 팝업 위치 변경 부분의 전체적인 또는 개략적인 소스가 필요합니다.
클릭하는 버튼의 기준이어야합니다.
감싸고 있는 부분이 아닌...
버튼의 위치값을 구하세요...
