Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Memusatkan Tetingkap Pop Timbul dalam Skrin Pengguna Menggunakan JavaScript?

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

DDD
Lepaskan: 2024-11-01 06:33:02
asal
1035 orang telah melayarinya

How to Center a Popup Window in the User's Screen Using 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>
Salin selepas log masuk

Contoh Penggunaan:

<code class="javascript">popupCenter({url: 'http://www.example.com', title: 'Popup Window', w: 500, h: 300}); </code>
Salin selepas log masuk

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!

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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan