Bagaimana untuk Memusatkan Tetingkap Pop Timbul dalam Penyemak Imbas?

Cara Meletakkan Tetingkap Pop Timbul Tepat di Tengah Skrin

Memusatkan tetingkap timbul yang dibuat menggunakan tetingkap JavaScript.fungsi buka pada skrin adalah penting untuk pengalaman pengguna yang optimum. Koordinat yang tepat bergantung pada resolusi skrin, jadi penyelesaian dinamik diperlukan.

Penyelesaian: Gunakan Fungsi Monitor Tunggal/Dwi

Penyelesaian teguh yang menampung kedua-dua single dan tetapan dwi monitor diberikan di bawah:

<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>

Contoh Penggunaan:

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

Kredit dan Sumber:

Penyelesaian ini, yang berasal dari http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html, dengan berkesan mengendalikan pemusatan tetingkap timbul untuk pelbagai konfigurasi skrin.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Tetingkap Pop Timbul dalam Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!