Javascript 在屏幕上居中弹出窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4068373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center a popup window on screen?
提问by Zo Has
How can we center a popup window opened via javascript window.openfunction on the center of screen variable to the currently selected screen resolution ?
我们如何将通过 javascriptwindow.open函数打开的弹出窗口在屏幕变量的中心居中到当前选择的屏幕分辨率？
回答by Tony M
SINGLE/DUAL MONITOR FUNCTION(credit to http://www.xtf.dk- thank you!)
单/双显示器功能（归功于http://www.xtf.dk- 谢谢！）
UPDATE: It will also work on windows that aren't maxed out to the screen's width and height now thanks to @Frost!
更新：由于@Frost，它现在也适用于没有最大化到屏幕宽度和高度的窗口！
If you're on dual monitor, the window will center horizontally, but not vertically... use this function to account for that.
如果您在双显示器上，窗口将水平居中，而不是垂直居中……使用此功能来解决这个问题。
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();
}
Usage Example:
用法示例：
popupCenter({url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500});
CREDIT GOES TO: http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html(I wanted to just link out to this page but just in case this website goes down the code is here on SO, cheers!)
信用转到：http: //www.xtf.dk/2011/08/center-new-popup-window-even-on.html（我只想链接到此页面，但以防万一该网站出现故障代码在这里，干杯！）
回答by oezi
try it like this:
像这样尝试：
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);
}
回答by CrazyTim
Due to the complexity of determining the center of the current screen in a multi-monitor setup, an easier option is to center the pop-up over the parent window. Simply pass the parent window as another parameter:
由于在多显示器设置中确定当前屏幕中心的复杂性，更简单的选择是将弹出窗口置于父窗口的中心。只需将父窗口作为另一个参数传递：
function popupWindow(url, title, 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, 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}`);
}
Implementation:
执行：
popupWindow('google.com', 'test', window, 200, 100);
回答by OmnipotentEntity
Source: http://www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen
来源：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;
}
回答by Taugenichts
If you want to center it on the frame you are currently in, I would recommend this function:
如果你想把它放在你当前所在的框架上，我会推荐这个功能：
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);
}
Similar to Crazy Tim's answer, but doesn't use window.top. This way, it will work even if the window is embedded in an iframe from a different domain.
类似于 Crazy Tim 的回答，但不使用 window.top。这样，即使窗口嵌入到来自不同域的 iframe 中，它也能工作。
回答by user1862764
It works very well in Firefox.
Just change the top variable to any other name and try again
它在 Firefox 中运行良好。
只需将顶部变量更改为任何其他名称，然后重试
var w = 200;
var h = 200;
var left = Number((screen.width/2)-(w/2));
var tops = Number((screen.height/2)-(h/2));
window.open("templates/sales/index.php?go=new_sale", '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+tops+', left='+left);
回答by mr.baby123
My recommendation is to use top location 33% or 25% from remaining space,
and not 50% as other examples posted here,
mainly because of the window header,
which look better and more comfort to the user,
我的建议是使用顶部位置33％或25％的剩余空间，
而不是50％作为其他例子张贴在这里，
主要是因为的窗口标题，
哪个更好看，更舒适的用户，
complete code:
完整代码：
<script language="javascript" type="text/javascript">
function OpenPopupCenter(pageURL, title, w, h) {
var left = (screen.width - w) / 2;
var top = (screen.height - h) / 4; // for 25% - devide by 4 | for 33% - devide by 3
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);
}
</script>
</head>
<body>
<button onclick="OpenPopupCenter('http://www.google.com', 'TEST!?', 800, 600);">click on me</button>
</body>
</html>
check out this line:
var top = (screen.height - h) / 4; // for 25% - devide by 4 | for 33% - devide by 3
看看这一行：
var top = (screen.height - h) / 4; // 25% - 除以 4 | 33% - 除以 3
回答by Roland Soós
Facebook use the following algorithm to position their login popup window:
Facebook 使用以下算法来定位他们的登录弹出窗口：
function PopupCenter(url, title, w, h) {
var userAgent = navigator.userAgent,
mobile = function() {
return /\b(iPhone|iP[ao]d)/.test(userAgent) ||
/\b(iP[ao]d)/.test(userAgent) ||
/Android/i.test(userAgent) ||
/Mobile/i.test(userAgent);
},
screenX = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft,
screenY = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop,
outerWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.documentElement.clientWidth,
outerHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : document.documentElement.clientHeight - 22,
targetWidth = mobile() ? null : w,
targetHeight = mobile() ? null : h,
V = screenX < 0 ? window.screen.width + screenX : screenX,
left = parseInt(V + (outerWidth - targetWidth) / 2, 10),
right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10),
features = [];
if (targetWidth !== null) {
features.push('width=' + targetWidth);
}
if (targetHeight !== null) {
features.push('height=' + targetHeight);
}
features.push('left=' + left);
features.push('top=' + right);
features.push('scrollbars=1');
var newWindow = window.open(url, title, features.join(','));
if (window.focus) {
newWindow.focus();
}
return newWindow;
}
回答by Nikhil Mathew
You can use css to do it, just give the following properties to the element to be placed in the center of the popup
可以使用css来做，只需给要放置在弹出窗口中心的元素赋予以下属性
element{
position:fixed;
left: 50%;
top: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
回答by Mike T
Here is an alternate version of the aforementioned solution...
这是上述解决方案的替代版本......
function openPopupCenter(url, title, w, h) {
// Fixes dual-screen position
// Most browsers use window.screenLeft
// Firefox uses screen.left
var dualScreenLeft = getFirstNumber(window.screenLeft, screen.left),
dualScreenTop = getFirstNumber(window.screenTop, screen.top),
width = getFirstNumber(window.innerWidth, document.documentElement.clientWidth, screen.width),
height = getFirstNumber(window.innerHeight, document.documentElement.clientHeight, screen.height),
left = ((width / 2) - (w / 2)) + dualScreenLeft,
top = ((height / 2) - (h / 2)) + dualScreenTop,
newWindow = window.open(url, title, getSpecs());
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
return newWindow;
function getSpecs() {
return 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left;
}
function getFirstNumber() {
for(var i = 0, len = arguments.length; i < len; i++) {
var value = arguments[i];
if (typeof value === 'number') {
return value;
}
}
}
}
