我们如何通过javascript窗口打开一个弹出窗口的中心。打开功能上的屏幕中心变量，以当前选择的屏幕分辨率?
当前回答
function fnPopUpWindow(pageId) {
popupwindow("hellowWorld.php?id="+pageId, "printViewer", "500", "300");
}
function popupwindow(url, title, w, h) {
var left = Math.round((screen.width/2)-(w/2));
var top = Math.round((screen.height/2)-(h/2));
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, '
+ 'menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=' + w
+ ', height=' + h + ', top=' + top + ', left=' + left);
}
<a href="javascript:void(0);" onclick="fnPopUpWindow('10');">Print Me</a>
注意:你必须使用数学。Round用于获得宽度和高度的精确整数。
其他回答
来源: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;
}
它在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);
我的ES6 JavaScript版本。 工作良好的铬和铬双屏幕设置。
function openCenteredWindow({url, width, height}) {
const pos = {
x: (screen.width / 2) - (width / 2),
y: (screen.height/2) - (height / 2)
};
const features = `width=${width} height=${height} left=${pos.x} top=${pos.y}`;
return window.open(url, '_blank', features);
}
例子
openCenteredWindow({
url: 'https://stackoverflow.com/',
width: 500,
height: 600
}).focus();
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;
}
我的建议是将剩余空间的33%或25%用于顶部位置，而不是像这里发布的其他示例那样使用50%， 主要是因为窗口头文件， 看起来更好，更舒适，
完整的代码:
<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>
看看这句话: Var top =(屏幕。高度- h) / 4;| for 33% -除以3
