팝업창 중앙정렬 가운데 위치시키는 방법

Last Modified : 2020-03-22 / Created : 2016-09-01

90,278
View Count

주소 복사하기

자바스크립트를 사용하여 팝업창을 원하는 위치에 띄우는 방법을 알아봅니다. 일반적으로 중앙에 팝업창을 많이 띄우므로 아래는 중앙에 정렬 기준으로 팝업창 띄우기를 알아봅니다.

! 잠깐. 팝업창은 어디에 띄우는게 좋을까?

띄우기 위한 방법을 알기 전에 어디 위치에 띄울 것인가 역시 중요합니다. 대부분의 방문자의 시선에 가장 쉽게 노출되는 가운데를 선호하거나 아니면 좌측 상단에 많이 노출합니다. 아무래도 페이지의 정중앙에 팝업을 위치하는 방법이 가장 선호되므로 이 방법으로 띄우는 방법과 예제를 알아보려고 합니다. 그럼 순서대로 먼저 팝업창을 띄우는 방법을 간단히 알아보고 위치를 가운데로 설정하는 방법에 대하여 다음으로 알아보겠습니다.

# 자바스크립트 팝업창을 띄우는 방법

자바스크립트를 사용하여 팝업창을 띄우려면 어떻게 해야할까요? 자바스크립트에서는 window.open()을 사용합니다. 다만 옵션 설정 등 내용이 많으므로 아래 링크에서 자세한 내용을 확인하시기 바랍니다. 여기서는 중앙에 띄우는 방법만 자세히 알아봅니다.

html 팝업창 띄우는 방법 및 고려할 사항들 바로가기 >
https://webisfree.com/2016-01-19/html-팝업창-띄우는-방법-및-고려할-사항들

그럼 팝업창을 띄우는 방법은 위 링크를 참고하시구요 다음으로 중앙에 정렬시키기 위한 방법을 알아겠습니다. 팝업창의 중앙 정렬은 가로, 세로 중앙으로 아래의 스크린샷 B에 해당하는 위치입니다.

스크린샷) 팝업처럼 새 창을 띄우는 경우 그 위치를 설정하자

! 팝업창을 중앙에 정렬하여 띄우는 방법

팝업창을 띄우기 위해서 자바스크립트의 window 객체의 open() 메소드를 사용해야하죠. 이때 open() 메소드의 인자로 팝업의 위치를 설정할 수 있는데 이 값을 조정하면 팝업창의 중앙 정렬하거나 원하는 어느 위치든 이동이 가능합니다.

다음으로 생각할 부분은 위치의 기준이 어디이냐입니다. 팝업창의 위치는 바로 현재 OS화면(윈도우즈 화면)을 기준으로 수치를 고려해야합니다. 즉 중앙 정렬을 위하여 50%의 값에 해당하는 픽셀 값을 알아야 중앙 정렬이 가능합니다.

그렇다면 현재 윈도우 크기의 중앙 위치를 알고 그 값에서 만들려는 팝업창의 크기만큼 다시 반대쪽으로 1/2 만큼 이동시킨다면? 우리가 원하는 정렬이 가능하겠죠. 다시 말해 여기서 필요한 두 가지 값은 바로 다음과 같습니다.

1. 현재 OS 화면의 크기(윈도우즈 또는 Mac 등의 화면 크기)
2. 만들 팝업창의 2분의 1 크기

이제 위와 같이 화면의 크기를 구하는 방법을 아래에서 알아봅니다.

! 현재 OS 화면의 좌우 및 상하 크기 얻기

먼저 현재 OS 화면의(윈도우의 크기) 상하 및 좌우 값을 구하는 방법으로 아래와 같이 구할 수 있습니다.

window.screen.width
// 좌우 크기 반환 Ex) 1920

window.screen.height
// 상하 크기 반환, Ex) 1080

현재 제 OS 환경에서는 각각 아래와 1920, 1080의 값을 출력하는군요. 그럼 실제 필요한 코드를 작성해봅니다. 만약 가로 세로 각각 200 x 300의 팝업창을 가운데 띄우려는 경우 아래와 같이 작성할 수 있겠습니다.

@ 가로 세로 200 x 300 팝업 가운데 띄우기

var popupWidth = 200;
var popupHeight = 300;

var popupX = (window.screen.width / 2) - (popupWidth / 2);
// 만들 팝업창 width 크기의 1/2 만큼 보정값으로 빼주었음

var popupY= (window.screen.height / 2) - (popupHeight / 2);
// 만들 팝업창 height 크기의 1/2 만큼 보정값으로 빼주었음

크기를 구했으니 팝업을 띄워야겠죠.

window.open('', '', 'status=no, height=' + popupHeight + ', width=' + popupWidth + ', left='+ popupX + ', top='+ popupY);

여기까지 팝업창의 중앙정렬을 위한 방법을 알아보았습니다.

@ 팝업이 여러개인 경우?
팝업창이 하나인 경우라면 중앙정렬의 방법이 효과적일 수 있으나 만약 2개 이상인 경우에는 중앙정렬보다는 좌측 또는 우측 방향으로 일자로 조금씩 간격을 띄워 나열하는 방식이 많이 쓰입니다.

! 현재 브라우저의 크기를 기준으로 중앙에 띄우는 방법

전체 화면 크기가 아닌 브라우저는 가변 크기이므로 브라우저를 기준으로 중앙 정렬시 사용하는 방법입니다. 위 코드와 비슷하지만 브라우저의 document.body..offsetWidth를 사용하도록 합니다.

var popupX = (document.body.offsetWidth / 2) - (200 / 2);
// 만들 팝업창 좌우 크기의 1/2 만큼 보정값으로 빼주었음

var popupY= (window.screen.height / 2) - (300 / 2);
// 만들 팝업창 상하 크기의 1/2 만큼 보정값으로 빼주었음

window.open('', '', 'status=no, height=300, width=200, left='+ popupX + ', top='+ popupY);

여기서 변수 popupY는 위의 방법과 동일하게 코드를 적용하였습니다. 그 이유는 문서 길이가 긴 경우 중앙정렬시 화면에서 안보이는 문제가 있기 때문에 좌우만 브라우저 크기를 기준으로 하는 것이 유리하기 때문입니다. 이제 위 코드를 실행하면 브라우저에 맞춰 중간에 위치하게 됩니다.