팝업 창을 화면 중앙에 정확하게 배치하는 방법

JavaScript의 window.open 기능을 사용하여 생성된 팝업 창을 화면 중앙에 배치 최적의 사용자 경험을 위해서는 화면이 필수적입니다. 정확한 좌표는 화면 해상도에 따라 달라지므로 동적 솔루션이 필요합니다.

해결책: 싱글/듀얼 모니터 기능 활용

싱글 모니터와 듀얼 모니터 기능을 모두 수용하는 강력한 솔루션 듀얼 모니터 설정은 아래와 같습니다:

const popupCenter = ({ url, title, w, h }) => {
    // Determine the positions based on screen resolution
    const dualScreenLeft = window.screenLeft || window.screenX;
    const dualScreenTop = window.screenTop || window.screenY;

    const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
    const height = window.innerHeight || document.documentElement.clientHeight || screen.height;

    // Adjust for system zoom
    const systemZoom = width / window.screen.availWidth;

    // Calculate the centered coordinates
    const left = (width - w) / 2 / systemZoom   dualScreenLeft;
    const top = (height - h) / 2 / systemZoom   dualScreenTop;

    // Open the popup window with the calculated dimensions and positioning
    const newWindow = window.open(url, title,
        `
        scrollbars=yes,
        width=${w / systemZoom},
        height=${h / systemZoom},
        top=${top},
        left=${left}
        `
    );

    if (window.focus) newWindow.focus();
};

사용 예:

popupCenter({ url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500 }); 

크레딧 및 출처:

이 솔루션은 원래 http://www.xtf.dk/2011/08/center-new-popup-window-even에서 나왔습니다. -on.html, 다양한 화면 구성에 맞게 팝업 창 중앙 정렬을 효과적으로 처리합니다.