最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

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

HTML crifan 737浏览 0评论

【背景】

折腾:

【已解决】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 open new page top left

希望是:

弹出显示的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));

结果:

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

window position right little

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);

结果:

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

(只不过,感觉位置稍微往下了一点点,不过影响不大,就无所谓了)

new html page window show on center of screen

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

 

【总结】

想要弹出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弹出新页面在屏幕中间显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
13 queries in 0.195 seconds, using 9.88MB memory