레이어 팝업 위치?? 여러개의 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 {position:relative;}
감싸고 해보셨나요?
!-->
클릭했을때 position값을구한다면
this로 구하면 되지않나요? id로 구한다면 for문으로 각각의 위치를 지정해줘야 할거에요
팝업을 띄울 때.. 'abc_1' 의 버튼으로 호출한 것인지, 'abc_2'의 버튼으로 호출한 것인지에 대한 정보를 팝업에 전달해야 됩니다.
팝업, 버튼 클릭을 통한 팝업 호출, 팝업 위치 변경 부분의 전체적인 또는 개략적인 소스가 필요합니다.
클릭하는 버튼의 기준이어야합니다.
감싸고 있는 부분이 아닌...
버튼의 위치값을 구하세요...