브라우저에서 팝업 창을 중앙에 맞추는 방법은 무엇입니까?

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

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

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

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

<code class="javascript">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();
};</code>

사용 예:

<code class="javascript">popupCenter({ url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500 }); </code>

크레딧 및 출처:

원본 http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html의 이 솔루션은 다양한 화면 구성에 대한 팝업 창 중심 배치를 효과적으로 처리합니다.

위 내용은 브라우저에서 팝업 창을 중앙에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!