在屏幕上居中弹出窗口?

IT技术 javascript
2021-01-15 20:43:30

我们如何将通过 javascriptwindow.open函数打开的弹出窗口在屏幕变量的中心居中到当前选择的屏幕分辨率?

6个回答

单/双显示器功能(归功于http://www.xtf.dk - 谢谢!)

更新:由于@Frost,它现在也适用于没有最大化到屏幕宽度和高度的窗口!

如果您在双显示器上,窗口将水平居中,而不是垂直居中……使用此功能来解决这个问题。

const popupCenter = ({url, title, w, h}) => {
    // Fixes dual-screen position                             Most browsers      Firefox
    const dualScreenLeft = window.screenLeft !==  undefined ? window.screenLeft : window.screenX;
    const dualScreenTop = window.screenTop !==  undefined   ? window.screenTop  : window.screenY;

    const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    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();
}

用法示例:

popupCenter({url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500});  

信用转到:http : //www.xtf.dk/2011/08/center-new-popup-window-even-on.html(我只想链接到此页面,但以防万一该网站出现故障代码在这里,干杯!)

原始问题于 2010 年发布,原始解决方案于 2010 年发布。我对 2013 年发布的关于无法在双显示器上工作的原始解决方案的评论,我对双显示器的回答于 2013 年发布。您对 2015 年三显示器的评论。您现在需要回答2015 年的三显示器解决方案。按照这个速度,我们将在 2020 年得到 5 台显示器、2025 年 6 台显示器、2030 年 7 台显示器的答案……让我们继续这个循环!
2021-03-18 20:43:30
感谢您的信任,我现在让我的示例在最小化窗口上工作:xtf.dk/2011/08/center-new-popup-window-even-on.html
2021-03-20 20:43:30
使用全局变量(宽度/高度),哎哟!
2021-03-20 20:43:30
经过一番玩耍后,这并没有我想象的那么好。更简单的例外答案效果更好。这仅在启动页面最大化时才有效。
2021-03-24 20:43:30
@TonyM 我已经更新了答案。是的,循环需要继续!
2021-03-30 20:43:30

像这样尝试:

function popupwindow(url, title, w, h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
此功能不适用于双显示器设置。我在下面发布了一个单显示器和双显示器解决方案。
2021-03-18 20:43:30
@mutanic w/h 指的是弹出窗口的大小,而不是屏幕。
2021-03-18 20:43:30
如果您想将窗口居中放置在浏览器中间而不是屏幕中间(例如,如果用户将浏览器调整为一半大小),这将不起作用。要在浏览器中居中,将 screen.width 和 screen.height 替换为 window.innerWidth 和 window.innerHeight
2021-04-03 20:43:30
我想确认一下:var left = (screen.width/2)-(w/2); var top = (screen.height/2)-(h/2); 不是会返回 left=0 和 top=0 吗???假设 w 等于 screen.width 并且 h 等于 screen.height ......我在这里是对还是错?
2021-04-06 20:43:30
不以我的第二台显示器为中心(从主显示器向上)。双屏的回答也失败了。
2021-04-06 20:43:30

由于在多显示器设置中确定当前屏幕中心的复杂性,更简单的选择是将弹出窗口置于父窗口的中心。只需将父窗口作为另一个参数传递:

function popupWindow(url, windowName, win, w, h) {
    const y = win.top.outerHeight / 2 + win.top.screenY - ( h / 2);
    const x = win.top.outerWidth / 2 + win.top.screenX - ( w / 2);
    return win.open(url, windowName, `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${w}, height=${h}, top=${y}, left=${x}`);
}

执行:

popupWindow('google.com', 'test', window, 200, 100);
这似乎是 Facebook 在共享按钮上弹出的技术。
2021-03-11 20:43:30
漂亮而简单的解决方案。在我的情况下,使用“outerHeight / 2.7”而不是“outerHeight / 2”看起来更好。另一件事:参数名称“title”具有误导性。它是窗口的名称,所以 winName 左右比较好,切中要害。
2021-03-11 20:43:30
我同意@OliB——这完美地解决了我们最近遇到的一个开发问题!应该是 2019 年公认的答案。
2021-03-24 20:43:30
在此处进行了修改以扩展此功能的功能它包括将宽度和高度设置为百分比或比率的选项。您还可以使用对象更改选项(比字符串更易于管理)
2021-03-29 20:43:30
这在双屏上对我来说非常有效。即使在移动窗口或调整窗口大小时,它也会显示在打开窗口的中央。这应该是公认的答案。谢谢。
2021-04-01 20:43:30

来源:http : //www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen

function PopupCenter(pageURL, title,w,h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
  return targetWin;
} 

如果你想把它放在你当前所在的框架上,我会推荐这个功能:

function popupwindow(url, title, w, h) {
    var y = window.outerHeight / 2 + window.screenY - ( h / 2)
    var x = window.outerWidth / 2 + window.screenX - ( w / 2)
    return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + y + ', left=' + x);
} 

类似于 Crazy Tim 的回答,但不使用 window.top。这样,即使窗口嵌入到来自不同域的 iframe 中,它也能工作。