JavaScript系列之控制窗口位置

ZDNet软件频道 时间:2004-05-13 作者:Builder.com |  我要评论(1)
本文关键词:javatips
让你的网站访客休息一下吧。除非你有绝佳的理由,否则还是不要让用户猜想下一个弹出窗口出现的位置。将弹出窗口固定显示在某个位置能够让用户的浏览过程更加舒适与流畅。这个技巧能够让你避免窗口随意出现在用户桌面不知道哪个位置上。
本文译自Builder.com,未经许可请勿转载

让你的网站访客休息一下吧。除非你有绝佳的理由(我相信的确会有),否则还是不要让用户猜想下一个弹出窗口出现的位置。将弹出窗口固定显示在某个位置能够让用户的浏览过程更加舒适与流畅。这个技巧能够让你避免窗口随意出现在用户桌面不知道哪个位置上。

这个技巧用起来十分容易,但是却并非每个网页设计者都知道如何使用它。

varputItHere = null;

functiontopLeft() {
  putItHere = window.open('topLeft.html','posA','width=200,height=300,top=40,left=40');
}

只要加上 top 与 left 这两个设定,我们便可以以像素为单位来设定窗口左上角与屏幕左上角之间的距离了。

精确地控制窗口与用户桌面的相对位置已经很棒了,但是把窗口准确地放在用户屏幕正中央则更是酷毙了!“看我的!”JavaScript 能够让网页设计者把窗口放在任何他们想要的位置上。

要把窗口放在屏幕正中央,没有比下面这个做法更好的了︰

varputItThere = null;

var chasm = screen.availWidth;
var mount = screen.availHeight;

var w = 0;
var h = 0;

function deadCenter(w,h) {
  putItThere = window.open('center.html','posB','width=' + w + ',height=' + h + ',left=' + ((chasm - w - 10) * .5) + ',top=' + ((mount - h - 30) * .5));
}

上面的做法简单地说就是使用 top 与 left 关键词来计算窗口在 x 轴与 y 轴的相对位置,让窗口不偏不倚地放在屏幕的正中央。要实现这个功能,我们把屏幕的可用宽度(变量 chasm)减去窗口宽度(变量 w)与左右两边外框的宽度(10),然后再乘以 x 坐标(.5)。接下来把屏幕的可用高度(变量 mount)减去窗口的高度(变量 h)与上下两边的外框高度(30),然后在乘以 y 坐标(.5)。

正如同我们预料的,两大浏览器在这里又再次让事情变得麻烦,因为两者的窗口边框的尺寸有点不太一样。因此,上面计算窗口外框尺寸方式里面的 10 像素宽与 30 像素高只是让两种浏览器都能适用的大概测量值,而不是精确的尺寸。


本文作者:Brent Lee Metcalfe 是一位 Web 架构顾问。


责任编辑:李宁

欢迎评论投稿

百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134