【已解决】html弹出新页面在屏幕中间显示

【背景】

折腾：

【已解决】jsp中把js的createWindow打开窗口变成新打开一个HTML网页

期间，用代码：

url = "lib/kindeditor/jsp/demo.jsp";
window.open(url, 'newwindow', 'height=480, width=800, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no') //写成一行);

显示效果：

希望是：

弹出显示的window，位于屏幕中间。

其中关于html的open时可以使用的参数，这里有看到一些：

JS页面跳转和打开新窗口的方法 – 耿鹏丽的博客

【折腾过程】

1.搜：

html window.open location center

参考：

javascript – Center a popup window on screen? – Stack Overflow

试试：

url = "lib/kindeditor/jsp/demo.jsp";
var w = 800;
var h = 600;
// 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;
width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
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;
//window.open(url, 'newwindow', 'height=480, width=800, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no') //写成一行);
window.open(url, 'newwindow', 'menubar=no, resizable=no, location=no, status=no, scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left));

结果：

显示位置只是往右动了点：

2.试试：

url = "lib/kindeditor/jsp/demo.jsp";
var w = 800;
var h = 600;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
window.open(url, "商品编辑页面", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);

结果：

基本实现了所要的效果：屏幕中间显示新打开的窗口

（只不过，感觉位置稍微往下了一点点，不过影响不大，就无所谓了）

效果还凑合，就这么用了。

【总结】

想要弹出HTML页面，显示在屏幕中间，则可以用js+html：

var w = 800;
var h = 600;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
window.open(url, "页面标题", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);

即可。

转载请注明：在路上 » 【已解决】html弹出新页面在屏幕中间显示