首页  >  文章  >  web前端  >  如何使弹出窗口在浏览器中居中?

如何使弹出窗口在浏览器中居中?

Linda Hamilton
Linda Hamilton原创
2024-10-31 06:20:02399浏览

How to Center a Popup Window in the Browser?

如何将弹出窗口精确定位在屏幕中央

将使用 JavaScript 的 window.open 函数创建的弹出窗口居中屏幕对于最佳用户体验至关重要。确切的坐标取决于屏幕分辨率,因此需要动态解决方案。

解决方案:利用单/双显示器功能

一个强大的解决方案,可同时容纳单显示器和双显示器双显示器设置如下:

<code class="javascript">const popupCenter = ({ url, title, w, h }) => {
    // Determine the positions based on screen resolution
    const dualScreenLeft = window.screenLeft || window.screenX;
    const dualScreenTop = window.screenTop || window.screenY;

    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 the centered coordinates
    const left = (width - w) / 2 / systemZoom + dualScreenLeft;
    const top = (height - h) / 2 / systemZoom + dualScreenTop;

    // Open the popup window with the calculated dimensions and positioning
    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.xtf.dk', title: 'xtf', w: 900, h: 500 }); </code>

鸣谢和来源:

这个解决方案最初来自http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html,有效地处理各种屏幕配置的弹出窗口居中。

以上是如何使弹出窗口在浏览器中居中?的详细内容。更多信息请关注PHP中文网其他相关文章!

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