jquery 팝업창을 화면 가운데 띄우기(윈도우의 중앙에 배치하기)

 

 

윈도우 스크롤이 어느 위치에 있든, 팝업창을 윈도우의 중간에 띄우는 방법

css에서 자식요소를 부모요소의 가운데에 정렬할 때,

left: calc(50% - '정렬하고자 하는 요소 너비의 절반') 이런 식으로 쓰는걸 응용한 방식이다.

var ww = $(window).width(); 
var wh = $(window).height(); 
var pw = $('#popup').width(); 
var ph = $('#popup').height(); 

$('#popup').css({'top': (wh/2) - (ph/2) + ($(window).scrollTop()), 
'left':(ww/2) - (pw/2) + ($(window).scrollLeft())});
});

윈도우에서 스크롤이 발생하지 않았다면,
'윈도우너비(높이)의 절반 - 팝업창너비(높이)의 절반'
이렇게만 계산해줘도 가운데 정렬이 되겠지만,

x축이든, y축이든 스크롤이 발생하면 윈도우를 기준으로 계산한 left값, top값이
스크롤 된 너비(높이)만큼 줄어들게 되므로, 그 높이를 더해줘야 한다.