윈도우 스크롤이 어느 위치에 있든, 팝업창을 윈도우의 중간에 띄우는 방법
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값이
스크롤 된 너비(높이)만큼 줄어들게 되므로, 그 높이를 더해줘야 한다.
'JS(JQuery)' 카테고리의 다른 글
jquery 일정시간 후에 한 번 실행하기/ 일회성 타이머 setTimeout(); (0) | 2023.11.27 |
---|---|
javascript 특정 문자 사이의 문자열 추출하기(유튜브 영상 id 가져오기) 문자열 자르기 (indexOf, substr, substring, slice) (0) | 2023.11.24 |
jquery 엘리먼트를 역순, 최신순 정렬하기. 선택자 preAll() (0) | 2023.11.02 |
jquery 제이쿼리 반응형 화면 사이즈 변하면 새로고침 (0) | 2023.10.26 |
jquery 제이쿼리 애니메이션 무한반복 만드는 법 Maximum call stack size exceeded 에러해결, 콜백함수, setInterval (1) | 2023.10.26 |