屏幕上居中显示一个popup窗口？
我们怎样才能将通过javascript window.open函数在屏幕variables的中心打开一个popup窗口中心到当前select的屏幕分辨率？
单/双监视器function （信贷http://www.xtf.dk – 谢谢！）
更新：它也将工作在窗口，不会溢出到屏幕的宽度和高度现在感谢@Frost！
如果您使用双显示器，则窗口将水平居中，但不是垂直居中…使用此function来解决这个问题。
function PopupCenter(url, title, w, h) { // Fixes dual-screen position Most browsers Firefox var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left; var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top; var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width; var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; var left = ((width / 2) - (w / 2)) + dualScreenLeft; var top = ((height / 2) - (h / 2)) + dualScreenTop; var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); // Puts focus on the newWindow if (window.focus) { newWindow.focus(); } }
用法示例：
PopupCenter('http://www.xtf.dk','xtf','900','500');
信用去： http : //www.xtf.dk/2011/08/center-new-popup-window-even-on.html （我想只是链接到这个网页，但以防万一本网站宕机代码在这里，欢呼！）
试试像这样：
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); }
来源： 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; }
由于在多监视器设置中确定当前屏幕中心的复杂性，更容易的select是将popup窗口居中在父窗口之上。 只需传递父窗口作为另一个参数：
function popupwindow(url, title, win, w, h) { var y = win.top.outerHeight / 2 + win.top.screenY - ( h / 2) var 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); }
它在Firefox中运行得非常好。
只需将顶部variables更改为任何其他名称，然后再试一次
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);
如果你想把它放在你目前所在的框架上，我会推荐这个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); }
类似Crazy Tim的回答，但不使用window.top。 这样，即使该窗口embedded在来自不同域的iframe中，也可以工作。
我的build议是使用剩余空间的最高位置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 =（screen.height – h）/ 4; // 25％ – 由4 |分开 为33％ – 除以3
你可以使用css来做到这一点，只要将下列属性赋予要放置在popup窗口中心的元素即可
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%); }
这是上述解决scheme的替代版本。
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; } } } }
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>
注意：您必须使用Math.round来获取宽度和高度的确切整数。
