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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!