Bagaimana untuk Memusatkan Tetingkap Pop Timbul dalam Skrin Pengguna Menggunakan JavaScript?

Cara Memusatkan Tetingkap Pop Timbul dalam Skrin Pengguna Menggunakan JavaScript

Untuk memusatkan tetingkap pop timbul yang dibuka menggunakan fungsi window.open, ia adalah penting untuk mengambil kira resolusi skrin semasa pengguna. Berikut ialah penyelesaian yang berkesan memusatkan tetingkap pada kedua-dua tetapan monitor tunggal dan dwi-monitor:

<code class="javascript">const popupCenter = ({url, title, w, h}) => {
    // Handle dual-screen position
    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;

    // Get browser window dimensions
    const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
    const height = window.innerHeight || document.documentElement.clientHeight || screen.height;

    // Account for system zoom to obtain accurate dimensions
    const systemZoom = width / window.screen.availWidth;
    const left = (width - w) / 2 / systemZoom + dualScreenLeft
    const top = (height - h) / 2 / systemZoom + dualScreenTop
    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.example.com', title: 'Popup Window', w: 500, h: 300}); </code>

Coretan kod ini membuka pop timbul tetingkap berpusat pada skrin pengguna, dengan URL, tajuk, lebar dan ketinggian yang ditentukan.

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