레이어 팝업 중앙에 띄우기

 

--------------------------- Source -------------------------------------------

 /* 팝업 위치 조정 */
 var left = ( $(window).scrollLeft() + ($(window).width() - $("#popup_div").width()) / 2 );
 var top = ( $(window).scrollTop() + ($(window).height() - $("#popup_div").height()) / 2 );
 
 document.getElementById("popup_div").style.left=left;
 document.getElementById("popup_div").style.top=top;
 /* 팝업 위치 조정 */

--------------------------- Source -------------------------------------------

 

 

popup_div 라고 레이어팝업의 아이디를 동일하게 주고, 상단처럼 각각의 left 와 top값을 구한뒤, popup_div에 데이터를 입력을 해주면, 스크롤 이동에 상관없이 현 화면의 중앙에 레이어팝업이 위치한다.

 

단, 쿼크모드일경우 $(window).width() 이 정상실행이 되지 않고, 0으로 작동된다.

이유는

http://stackoverflow.com/questions/12937494/why-does-firefox-return-0-as-the-value-of-window-height/17049073#17049073

에 나와있는 답변 중 하나에 있다.

 

Don’t use Quirks mode! jQuery has never supported Quirks mode and we do not perform any testing in Quirks.

 

위의 경우는 하단 소스로 적용하면 동일하게 작동된다.

 

var left = ( document.body.scrollLeft + (document.body.clientWidth - $(".popup_div").width()) / 2 );
 var top = ( document.body.scrollTop + (document.body.clientHeight - $(".popup_div").height()) / 2 );

 

## 참조사이트

http://mytory.net/archives/812/