首页  >  文章  >  web前端  >  如何使用 JavaScript 将弹出窗口置于用户屏幕中央?

如何使用 JavaScript 将弹出窗口置于用户屏幕中央?

DDD
DDD原创
2024-11-01 06:33:021015浏览

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn