Bagaimanakah Saya Boleh Memusatkan Tetingkap Pop Timbul pada Skrin Menggunakan JavaScript?

Mary-Kate Olsen
Lepaskan: 2024-10-30 10:30:02
asal
813 orang telah melayarinya

How Can I Center a Popup Window on the Screen Using JavaScript?

Memusatkan Tetingkap Pop Timbul

Memusatkan tetingkap timbul pada skrin boleh dicapai menggunakan fungsi window.open JavaScript. Koordinat tepat (x dan y) di mana tetingkap akan muncul berbeza-beza berdasarkan peleraian skrin semasa.

Penyelesaian Merentas Platform

Penyelesaian berikut berfungsi untuk kedua-duanya persediaan tunggal dan dwi-monitor:

<code class="js">const popupCenter = ({ url, title, w, h }) => {
  // Adjust for dual-screen positions
  const dualScreenLeft = window.screenLeft || window.screenX;
  const dualScreenTop = window.screenTop || window.screenY;

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

  // Calculate the scaling factor
  const systemZoom = width / window.screen.availWidth;

  // Calculate the window's position
  const left = (width - w) / 2 / systemZoom + dualScreenLeft;
  const top = (height - h) / 2 / systemZoom + dualScreenTop;

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

  // Focus the new window
  if (window.focus) newWindow.focus();
};</code>
Salin selepas log masuk

Contoh Penggunaan

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

Kredit

Penyelesaian ini disesuaikan daripada http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Tetingkap Pop Timbul pada Skrin Menggunakan JavaScript?. 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!