안녕하세요
오늘은 window open 중앙정렬 및 오른쪽 정렬에 대해 알아보겠습니다.
일단 window open의 옵션은
- channelmode=yes|no|1|0 : 전체화면으로 창이 열립니다. ( IE에서만 동작)
- directories=yes|no|1|0 : 사용 X
- fullscreen=yes|no|1|0 : 전체화면 모드( IE에서만 동작)
- height=pixels : 창의 높이 지정
- width=pixels : 창의 넓이 지정
- left=pixels : 창의 화면 왼쪽에서의 위치 지정( 음수 사용 불가 )
- top=pixels : 창의 화면 위쪽에서의 위치 지정( 음수 사용 불가 )
- location=yes|no|1|0 : 주소 표시줄 사용여부 지정( opera에서만 동작 )
- menubar=yes|no|1|0 : 메뉴바 사용여부 지정
- resizable=yes|no|1|0 :창의 리사이즈 가능 여부 지정( IE에서만 동작 )
- status=yes|no|1|0 : 상태바를 사용여부 지정
- titlebar=yes|no|1|0 : 타이틀바를 사용여부 지정
- toolbar=yes|no|1|0 : 툴바를 사용여부 지정( IE, Firefox에서 동작 )
옵션에서 볼수 있듯이 팝업 위치는 top과 left 기준입니다.
중앙정렬하기
function popupCenter(href, w, h) {
var xPos = (document.body.offsetWidth/2) - (w/2); // 가운데 정렬
xPos += window.screenLeft; // 듀얼 모니터일 때
var yPos = (document.body.offsetHeight/2) - (h/2);
window.open(href, "pop_name", "width="+w+", height="+h+", left="+xPos+", top="+yPos+", menubar=yes, status=yes, titlebar=yes, resizable=yes");
}document.body.offsetWidth를 구해서 현재 열려있는 브라우저 body의 offsetWidth(패딩과 보더 포함)를 가지고 옵니다.
(여기서 screen.width를 사용하지 않는 이유는 듀얼 모니터에서는 screen.width가 주모니터의 width를 가지고 오기 때문에 서브 모니터에서 팝업을 열 경우 제대로 동작하지 않습니다.)
가지고온 offsetWidth에서 절반을 빼고 팝업의 넓이의 절반을 빼주면 가로 중앙 정렬은 완성이 되는데요
여기서 주의하셔야 할 점은 듀얼 모니터일 경우에는
window.screenLeft를 더해주셔야 제대로 동작합니다.
세로 중앙 정렬은 가로 정렬과 동일하게 작성해 주시면 됩니다.( screenLeft는 제외 )
오른쪽 정렬하기
function popupCenter(href, w, h) {
xPos = (document.body.offsetWidth) - w; 오른쪽 정렬
xPos += window.screenLeft; // 듀얼 모니터일 때
var yPos = (document.body.offsetHeight/2) - (h/2);
window.open(href, "pop_name", "width="+w+", height="+h+", left="+xPos+", top="+yPos+", menubar=yes, status=yes, titlebar=yes, resizable=yes");
}오른쪽 정렬은 가로 코드만 수정해 주시면 됩니다.
document.body.offsetWidth에서 팝업의 width를 빼주시게되면 오른쪽에 딱 붙게 됩니다.
감사합니다.
