본문 바로가기
IT tech Coding/javascript

자바스크립트로 window 창을 띄울때 컴퓨터의 해상도에 따라서 팝업창이 뜨게 하는 코드

by Coding Life 2024. 9. 26.

해상도에 따라 팝업 창의 크기와 위치를 조정하려면 JavaScript를 사용하여 화면의 해상도를 감지하고, 그에 맞게 window.open 메서드로 팝업 창을 띄울 수 있습니다. 아래는 해상도에 따라 팝업 창의 크기와 위치를 조정하는 예제 코드입니다.

javascript
function openPopup() {
    // 현재 화면의 해상도를 가져옵니다.
    var screenWidth = window.screen.width;
    var screenHeight = window.screen.height;

    // 팝업 창의 크기를 설정합니다 (예: 화면의 50% 크기로 설정).
    var popupWidth = screenWidth * 0.5;
    var popupHeight = screenHeight * 0.5;

    // 팝업 창의 위치를 화면 중앙으로 설정합니다.
    var left = (screenWidth - popupWidth) / 2;
    var top = (screenHeight - popupHeight) / 2;

    // 팝업 창을 엽니다.
    window.open('popup.html', 'PopupWindow', `width=${popupWidth},height=${popupHeight},left=${left},top=${top},resizable=yes,scrollbars=yes`);
}

// 팝업 열기 버튼 클릭 시 호출
document.getElementById('openPopupBtn').addEventListener('click', openPopup);
코드 설명:
window.screen.width와 window.screen.height를 사용하여 화면의 해상도를 가져옵니다.
해상도의 50% 크기로 팝업 창의 너비와 높이를 설정합니다. (필요에 따라 조정할 수 있습니다.)
팝업 창을 화면 중앙에 위치하도록 left와 top을 계산합니다.
window.open 메서드를 사용하여 팝업 창을 열고, 계산된 크기와 위치를 적용합니다.
이 코드를 사용하면 Windows 10과 Windows 11에서 해상도에 맞게 팝업 창이 적절하게 열리게 할 수 있습니다. 필요한 경우 팝업 창의 크기나 위치를 조정할 수 있습니다.

반응형