TIP게시판

제목 [자바스크립트] 창을 화면 정중앙에 위치하게 계산하기
글쓴이 변종원(웅파) 작성시각 2012/01/11 19:02:08
댓글 : 1 추천 : 0 스크랩 : 0 조회수 : 26830   RSS

var aa = (document.body.scrollTop + (window.innerHeight/2)) ;
        
var x = (window.innerWidth - wW) / 2 ;
var y = (aa - (wH / 2));

wW와 wH는 화면에 뜨는 팝업창의 크기입니다.

Y를 구하는 공식 :

aa의 값은 

document.body.scrollTop : 현재 스크롤의 위치값
window.innerHeight : 메뉴바, 툴바 등을 뺀 브라우저의 높이

현재 스크롤의 위치값에 순수화면값의 절반을 더하면 현재 화면의 중앙 값이 구해집니다.
(스크롤을 하더라도 현재 화면의 중앙값 계산됩니다.)

거기에 화면에 뜨는 팝업창 높이의 1/2을 빼면 팝업창이 위치할 Y축이 구해집니다.

X는 고정된 값이기 때문에 계산하기가 쉽습니다.
순수 화면크기값에서 팝업의 width를 뺀 값의 1/2이 X축 중앙이 됩니다.


검색하다 안나와서 그림 그려가면서 로직 만들었네요. (분명 있을건데... ㅎㅎㅎㅎ)

어쨌든 팝업의 크기에 상관없이, 스크롤 위치에 상관없이 현재 화면의 정 중앙에 팝업창이 위치합니다. ^^
 다음글 anchor_popup 헬퍼 화면 정 가운데 띄우기. ...
 이전글 hook에서 선언한 변수를 컨트롤러에서 사용하기 (4)

댓글

소울펨 / 2012/03/26 20:16:44 / 추천 0
알짜배기 소스 감솨 ㅎㅎㅎ 매번 플젝하면 만드는 코드인데 막상 할때면 찾고 다니죠 ㅎㅎㅎ