팝업 창을 화면 중앙에 띄우려면 window.open() 메서드를 사용하면서, 화면 전체 크기에서 팝업 창의 크기를 뺀 값을 기준으로 left(가로 위치)와 top(세로 위치)을 계산하면 됩니다. 일반적으로 가로는 정확히 중앙에 맞추고, 세로는 시각적으로 더 자연스럽도록 중앙보다 약간 위쪽에 배치하는 경우가 많습니다.
아래 예제 코드를 실행하면 화면 중앙에 팝업 창이 열리는 것을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<script>
function myPopup(myURL, title, myWidth, myHeight) {
var left = (screen.width - myWidth) / 2;
var top = (screen.height - myHeight) / 4;
var myWindow = window.open(myURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + myWidth + ', height=' + myHeight + ', top=' + top + ', left=' + left);
}
</script>
<button onclick="myPopup('https://www.qries.com', 'web', 1050, 550);">Qries.com 열기</button>
</body>
</html>코드 설명
- left 계산:
(screen.width - 창 너비) / 2공식을 사용해 팝업 창을 화면의 좌우 중앙에 정렬합니다. - top 계산:
(screen.height - 창 높이) / 4공식을 사용해 창을 화면 중앙보다 살짝 위쪽에 배치합니다. 이렇게 하면 시각적으로 더 안정적인 느낌을 줍니다. - window.open() 옵션: 툴바, 주소창, 메뉴바 등을 모두 비활성화(
no)하여 깔끔한 형태의 팝업 창을 만들고,width,height,top,left값으로 창의 크기와 위치를 지정합니다.
버튼을 클릭하면 지정한 URL이 위에서 계산한 위치에 맞춰 새 팝업 창으로 열립니다. 창 크기나 위치 값을 조정하고 싶다면 함수 호출 시 전달하는 myWidth와 myHeight 인수만 변경하면 됩니다.