我们如何通过javascript窗口打开一个弹出窗口的中心。打开功能上的屏幕中心变量,以当前选择的屏幕分辨率?
当前回答
由于在多显示器设置中确定当前屏幕中心的复杂性,一个更简单的选择是将弹出窗口置于父窗口的中央。简单地将父窗口作为另一个参数传递:
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);
其他回答
来源: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;
}
你可以使用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%);
}
这种混合解决方案对我来说很有效,无论是单屏还是双屏设置
function 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 left = (window.screen.width/2)-(w/2) + dualScreenLeft;
const top = (window.screen.height/2)-(h/2) + dualScreenTop;
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);
}
如果你想让它在你当前所在的帧上居中,我推荐这个功能:
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);
}
类似于疯狂蒂姆的答案,但没有使用window.top。这样,即使窗口嵌入在来自不同域的iframe中,它也能工作。
基于Facebook的,但使用媒体查询而不是用户代理正则表达式来计算是否有足够的空间(有一些空间)弹出窗口,否则将全屏。不管怎样,Tbh在移动设备上弹出的窗口会作为新标签打开。
function popupCenter(url, title, w, h) {
const hasSpace = window.matchMedia(`(min-width: ${w + 20}px) and (min-height: ${h + 20}px)`).matches;
const isDef = v => typeof v !== 'undefined';
const screenX = isDef(window.screenX) ? window.screenX : window.screenLeft;
const screenY = isDef(window.screenY) ? window.screenY : window.screenTop;
const outerWidth = isDef(window.outerWidth) ? window.outerWidth : document.documentElement.clientWidth;
const outerHeight = isDef(window.outerHeight) ? window.outerHeight : document.documentElement.clientHeight - 22;
const targetWidth = hasSpace ? w : null;
const targetHeight = hasSpace ? h : null;
const V = screenX < 0 ? window.screen.width + screenX : screenX;
const left = parseInt(V + (outerWidth - targetWidth) / 2, 10);
const right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10);
const 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');
const newWindow = window.open(url, title, features.join(','));
if (window.focus) {
newWindow.focus();
}
return newWindow;
}