하은양 믿음군 효실맘 호홍홍집s

버튼클릭시 해당버튼 근처에 레이어띄우기(offset 이용) 본문

가벼운 배움/JQuery

버튼클릭시 해당버튼 근처에 레이어띄우기(offset 이용)

호홍홍집 2016. 7. 20. 03:35

$('#btnAddPP') 버튼을 클릭시,  버튼의 $(this).offset() 명령을 이용하여
현재 버튼의 Left (v_thisOffset.left), Top (v_thisOffset.top)을 구하고

그값을 통해 $('#mempplist') 레이어를 해당 버튼의 좌측에 표시하기

var v_btnAddPP = $('#btnAddPP');
v_btnAddPP.click(function(event){
   var v_thisOffset = $(this).offset();
   var v_mempplist = $('#mempplist');
   var v_mempplistW = v_mempplist.width() + 20;
   var v_mempplistH = v_mempplist.height() / 2;
   v_mempplist.css({'left':v_thisOffset.left - v_mempplistW ,'top':v_thisOffset.top - v_mempplistH});
   v_mempplist.show();

   event.preventDefault();
});

레이어 div에는 position:absolute; 속성이 있어야하죵!!

<div id="mempplist" style="display: none;position:absolute;">
     mempplist 레이어의 내용
</div>

 

// 해당 스크린 중앙에 위치시키기
var v_selRsvDate = $('[id^="selRsvDate_"]');
v_selRsvDate.click(function(event){
   var v_thisOffset = $(this).offset();

   var v_frmFileDiv = $('#frmFileDiv');
   var v_frmFileDivW = v_frmFileDiv.width();
   var v_frmFileDivH = v_frmFileDiv.height();

   var midScreenX = Math.ceil(screen.width / 2);
   var divL = midScreenX - Math.ceil(v_frmFileDivW / 2);

   v_frmFileDiv.css({'left':divL ,'top':v_thisOffset.top + v_frmFileDivH});
   v_frmFileDiv.show();
   event.preventDefault();

});