超实用的jQuery代码段最新章节_周敏著

1.30 页面加载后消息框居中显示

设计页面时经常会需要使用alert()警示消息框来提示用户需要注意的问题，为了美观，建议在弹出消息框时居中显示。本例演示效果如图1.46与图1.47所示。

图1.46 居中显示消息框

图1.47 调整窗口后再显示消息框

本例主要代码如下：

本例的关键代码是第19~26行中的resize()自定义函数，具体分析如下：第20行中的$(window).width()函数获取整个浏览器可视窗口的宽度；第21行中的$(window).height()函数获取整个浏览器可视窗口的高度；第22行中的$(document).scrollTop()函数获取浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）；第23~24行负责计算弹出消息框对象的left与top定位；第25行中的obj.css()函数返回或设置匹配的元素的一个或多个样式属性。

设计人员要注意以下两点：

● 如果用户使用$(window).height()函数无法获取实际窗口高度时，需要在HTML页面顶部添加<!DOCTYPE html>关键字标识。

● 当使用$(selector).css(name)函数用于返回一个值时，不支持简写的CSS属性（例如，background属性和border属性）。