[JS] 모니터/브라우저 기준 팝업창 가운데 띄우기 (window.open)

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
 - 브라우저의 외부 세로 크기