[JavaScript] 모니터, 듀얼 모니터 및 브라우저 기준으로 팝업창 가운데 띄우기

요즘은 브라우저에서 사용자 인터페이스를 구현할 때 팝업창을 띄우는 일이 많이 줄었습니다. 그래도 가끔은 필요하기에 간단하게 팝업창을 띄우는 방법은 비교적 간단합니다. Javascript에서 window.open() 함수를 사용하면 됩니다. 

 

팝업창을 띄우는 자세한 방법에 대해서는 아래 링크를 참고해주세요.

[Javascript] window.open(), window.opener() 부모창 자식창 간의 제어 방법

 

그런데 팝업창을 화면의 중앙에 띄울 경우는 조금 더 복잡하게 팝업창을 띄울 위치를 계산해야 합니다. 게다가 듀얼 윈도를 사용하는 사용자들이 많아지면서 일반적인 방법의 계산으로는, 팝업창이 듀얼 윈도를 기준으로 계산이 되어, 엉뚱한 위치에 띄워지게 됩니다. 그리고 전체 화면으로 사용하고 있지 않은 사용자의 경우 팝업창이 브라우저를 벗어나기도 합니다. 

 

위와 같은 경우를 대비해서 팝업창을 띄우는 위치를 계산하는 방법을 정리하였습니다.

 

1. 단일 모니터

function open_win(url, name, width, height) {
	// name   : 팝업윈도우_이름
    // width  : 팝업창 가로 크기
    // height : 팝업창 세로 크기
	var popupWidth = width;
	var popupHeight = height;
	
    // window.screen.width  : 윈도우의 가로 크기
    // window.screen.height : 윈도우의 세로 크기
	var popupX = Math.round((window.screen.width/2) - (popupWidth/2));
	var popupY = Math.round((window.screen.height/2) - (popupHeight/2));
	
    // 윈도우 팝업창의 스타일 지정
	var featureWindow = "width=" + popupWidth + ", height="+popupHeight
	                  + ", left=" + popupX + ", top=" + popupY;
	
	return window.open(url, name, featureWindow);
}

 

window.screen.width 
 - 윈도의 가로 크기
 - 듀얼 윈도일 경우 전체 창을 기준으로 가로 크기를 반환
window.screen.height
 - 윈도의 세로 크기
 - 듀얼 윈도일 경우 전체 창을 기준으로 세로 크기를 반환

 

단일 윈도 창이라면 위의 코드로 간단하게 팝업창의 위치를 가로로 조절할 수 있습니다.

 

window.screen 에서 사용하고 있는 윈도 화면의 가로 크기와 세로 크기를 얻어 올 수 있으므로, 이 크기의 절반에서 팝업창의 크기의 절반을 빼주면 팝업창의 왼쪽 위 좌표를 계산할 수 있습니다. 이것을 window.open() 함수의 파라미터로 전달하여 위치를 가운데로 설정할 수 있습니다. 

 

그러나 듀얼 모니터일 경우 window.screen.width가 동일 화면 크기 기준으로 2배가 됩니다. 따라서 팝업 윈도의 위치가 원하는 가운데 위치에 뜨게 되지 않습니다.

 

2. 듀얼 모니터

 

듀얼 모니터가 되면 모니터 정렬 위치에 따라 좌표 값이 달라지게 됩니다. 

가장 많이 사용하는 경우가 좌우로 배치하는 경우입니다.

 

주 모니터에 따라서 설정이 1번이 왼쪽, 2번이 오른쪽이 되기도 하고, 좌측에 2번이 올 경우도 있습니다.

 

 

 

드물지만 상하로 배치하는 경우도 있습니다. 

이런 경우를 모두 고려하면 전체 스크린을 기준으로 브라우저가 있는 스크린의 중앙에 팝업을 띄우는 일은 쉽지 않습니다. 

 

 

모든 경우를 계산해서 조금은 억지스러운 코드를 만들어보면 아래와 같습니다. 

보다 간략하게 표기할 수도 있지만 풀어서 적었습니다. 

 

function open_win(url, name, width, height) {
    // name   : 팝업윈도우_이름
    // width  : 팝업창 가로 크기
    // height : 팝업창 세로 크기
	
    // window.screenX : 현재 스크린에서 브라우저 좌측상단 X좌표
    // window.screenY : 현재 스크린에서 브라우저 좌측상단 Y좌표
    var winPosX = window.screenX;
    var winPosY = window.screenY;
	
    // window.screen.width  : 윈도우의 가로 크기
    // window.screen.height : 윈도우의 세로 크기
    var screenWidth  = window.screen.width;
    var screenHeight = window.screen.height; 

    var popupX;
    var popupY;

    if (winPosX > 0) {
        if (winPosX < screenWidth) // 1번(좌) : 2번(우) 순서에서 1번 스크린이면  
            popupX = Math.round((screenWidth/2) - (popupWidth/2));
        else                       // 1번(좌) : 2번(우) 순서에서 2번 스크린이면
            popupX = Math.round(screenWidth + (screenWidth/2) - (popupWidth/2)) ;
    } else {
        // 2번(좌) : 1번(우) 순서에서 2번 스크린이면
        popupX = -Math.round((screenWidth/2) + (popupWidth/2));
    
	
    if (winPosY > 0) {
        if (winPosY < screenHeight) // 1번(상) : 2번(하) 순서에서 위쪽 스크린이면  
            popupY = Math.round((screenHeight/2) - (popupHeight/2));
        else                        // 1번(상) : 2번(하) 순서에서 아래쪽 스크린이면
            popupY = Math.round(screenHeight + (screenHeight/2)-(popupHeight/2));
    } else {
        // 2번(상) : 1번(하) 순서에서 위쪽 스크린이면
        popupY = -Math.round((screenHeight/2)+(popupHeight/2));
    }

    // 윈도우 팝업창의 스타일 지정
    var featureWindow = "width=" + popupWidth + ", height="+popupHeight
                      + ", left=" + popupX + ", top=" + popupY;

    return window.open(url, name, featureWindow);
}

 

window.screen.width 
 - 윈도의 가로 크기
 - 듀얼 윈도일 경우 전체 창을 기준으로 가로 크기를 반환
window.screen.height
 - 윈도의 세로 크기
 - 듀얼 윈도일 경우 전체 창을 기준으로 세로 크기를 반환

window.screenX
 - 현재 스크린에서 브라우저의 좌측 상단 X 좌표
window.screenY
 - 현재 스크린에서 브라우저의 좌측 상단 Y 좌표

위치에 따라서 1번이 좌측, 2번이 우측으로 배치한 경우 2번 윈도의 위치는 좌측 스크린만큼 띄워 계산해줘야 합니다. 그러나 실제로 좌측 스크린의 크기를 가져올 방법은 없는 것 같습니다. 그래서 현재 브라우저가 위치한 스크린의 크기로 좌측에 여백을 더해서 우측 스크린으로 좌표를 계산했습니다. 만약 1번, 2번 스크린의 크기가 같다면 잘 동작하지만, 두 스크린의 크기가 다르다면 경우에 따라서 위치 계산에 오류가 있습니다.

 

게다가 요즘은 듀얼 모니터뿐만 아니라 3개 이상의 모니터를 사용하는 경우도 있습니다. 이 경우는 계산이 더 복잡해집니다. 

그래서 대안으로는 브라우저 창을 기준으로 계산해서 팝업창을 띄우는 것이 오히려 안전합니다. 

 

계산을 통해서 브라우저 창의 안쪽 중앙에 띄우거나, 적당한 위치를 산출하는 것이 더 좋습니다.

 

3. 브라우저 창

팝업창이 브라우저 창을 기준으로 가운데 뜨도록 하는 방법입니다.

 

function popupWindow(url, title, width, height) {
    // width  : 팝업창 가로 크기
    // height : 팝업창 세로 크기
    var popupWidth = width;
    var popupHeight = height;
    
    // 브라우저 중앙 위치 계산
    // window.screenX : 브라우저의 현재 스크린 좌측상단 X좌표
    // window.screenY : 브라우저의 현재 스크린 좌측상단 Y좌표
   
    // window.outerWidth  : 브라우저의 전체 가로 크기
    // window.outerHeight : 브라우저의 전체 가로 크기
    var popupX = Math.round(window.screenX + (window.outerWidth/2) - (popupWidth/2));
    var popupY = Math.round(window.screenY + (window.outerHeight/2) - (popupHeight/2));
    
    // 윈도우 팝업창의 스타일 지정
    var featureWindow = "width=" + popupWidth + ", height="+popupHeight
                      + ", left=" + popupX + ", top=" + popupY;

    return window.open(url, name, featureWindow);
}

 

브라우저의 현재 스크린의 좌측 상단 좌표를 얻어올 수 있고, 브라우저의 크기도 얻어 올 수 있으므로 이 숫자와 팝업창의 크기를 계산하면 적절한 위치에 팝업창을 띄울 수 있습니다.

 

window.screen.width 
 - 윈도의 가로 크기
 - 듀얼 윈도일 경우 전체 창을 기준으로 가로 크기를 반환
window.screen.height
 - 윈도의 세로 크기
 - 듀얼 윈도일 경우 전체 창을 기준으로 세로 크기를 반환

window.screenX
 - 현재 스크린에서 브라우저의 좌측 상단 X 좌표
window.screenY
 - 현재 스크린에서 브라우저의 좌측 상단 Y 좌표

window.outerWidth
 - 브라우저의 외부 가로 크기
window.outerHeight
 - 브라우저의 외부 세로 크기

---

아무리 고민해봐도 제 생각은 세 번째 방법인 브라우저 창을 기준으로 팝업창을 띄우는 것이 가장 안전하다고 생각합니다. 혹시나 더 좋은 방법이나 아이디어가 있다면 댓글 부탁드립니다. 

 

 

 

 

참고

https://qastack.kr/programming/4068373/center-a-popup-window-on-screen