Bagaimana untuk Memusatkan Tetingkap Pop Timbul pada Skrin dalam Persediaan Monitor Tunggal dan Dwi?-tutorial js-php.cn

Bagaimana untuk Memusatkan Tetingkap Pop Timbul pada Skrin dalam Persediaan Monitor Tunggal dan Dwi?

Mary-Kate Olsen

Lepaskan： 2024-10-31 19:11:02

asal

498 orang telah melayarinya

How to Center a Popup Window on Screen in Both Single and Dual Monitor Setups?

Cara Memusatkan Tetingkap Pop Timbul pada Skrin

Untuk memusatkan tetingkap timbul pada skrin, kami boleh menggunakan fungsi window.open JavaScript dan beberapa pengiraan tambahan untuk menentukan yang tepat koordinat x dan y berdasarkan peleraian skrin semasa.

Fungsi Monitor Tunggal/Dwi

Untuk kedua-dua tetapan monitor tunggal dan dwi-monitor, fungsi berikut memusatkan tetingkap pop timbul secara mendatar sambil mengambil kira kemungkinan ia tidak dimaksimumkan sepenuhnya:

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

  // Calculate available screen dimensions
  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 centered coordinates
  const left = (width - w) / 2 / systemZoom + dualScreenLeft
  const top = (height - h) / 2 / systemZoom + dualScreenTop

  // Open the new window
  const newWindow = window.open(url, title, 
    `
    scrollbars=yes,
    width=${w / systemZoom}, 
    height=${h / systemZoom}, 
    top=${top}, 
    left=${left}
    `
  )

  // Bring the new window to focus
  if (window.focus) newWindow.focus();
}</code>

Salin selepas log masuk

Contoh Penggunaan

Untuk memusatkan tetingkap pop timbul pada resolusi skrin 900x500 dengan tajuk "XTF":

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Tetingkap Pop Timbul pada Skrin dalam Persediaan Monitor Tunggal dan Dwi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!