首頁 > web前端 > js教程 > 主體

如何使用 JavaScript 將彈出視窗置於使用者螢幕中央?

DDD
發布: 2024-11-01 06:33:02
原創
1000 人瀏覽過

How to Center a Popup Window in the User's Screen Using JavaScript?

如何使用JavaScript 將彈出視窗置於使用者螢幕的中心

要讓使用window.open 函數開啟的彈出視窗居中,請執行以下操作:重要的是要考慮使用者目前的螢幕解析度。這是一個有效地將視窗集中在單顯示器和雙顯示器設定上的解決方案:

<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>
登入後複製

使用範例:

<code class="javascript">popupCenter({url: 'http://www.example.com', title: 'Popup Window', w: 500, h: 300}); </code>
登入後複製

此程式碼片段打開一個彈出視窗以使用者螢幕為中心的窗口,具有指定的URL、標題、寬度和高度。

以上是如何使用 JavaScript 將彈出視窗置於使用者螢幕中央?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板