控制弹出窗口居中显示

实例说明

点击页面上的按钮，弹出窗口，并将窗口居中显示。

技术要点

本例首先应用 JavaScript 中的 window 对象的 open()方法，打开指定大小的新窗口，然后通过 screen 对象，获取屏幕分辨率，再根据获取的值通过 window 对象的 moveTo()方法，将新窗口移动到屏幕居中位置。

moveTo()方法将窗口移动到指定坐标（x,y）处,其语法格式如下。

window.moveTo(x,y)

其中，参数 x,y 表示窗口移动到的位置处的坐标值。

screen 对象是 JavaScript 中的屏幕对象，反映了当前用户的屏幕设置。

screen 对象的常用属性

属性	说明
width	用户整个屏幕的水平尺寸，以像素为单位
height	用户整个屏幕的垂直尺寸，以像素为单位
pixelDepth	显示器的每个像素的位数
colorDepth	返回当前颜色设置所用的位数，1代表黑白；8代表256色；16代表增强色；24/32代表真彩色。8 位颜色支持 256种颜色，16位颜色（通常叫做“增强色”）支持大概64000种颜色，而 24位颜色（通常叫做“真彩色”）支持大概1600万种颜色。
availHeight	返回窗口内容区域的垂直尺寸，以像素为单位
availWidth	返回窗口内容区域的水平尺寸，以像素为单位

实现过程

1.要弹出的窗口

new.html

<html>        
<head>        
<title>要居中显示的弹出窗口</title>        
<style type="text/css">        
body{        
    background-image:url(new.jpg);        
    background-repeat:no-repeat;        
    }        
</style>        
</head>        
<body></body>        
</html>

2.实现功能的页面

index.html

<span style="font-size:14px;"><html>          
<head>          
<title></span><span style="font-family: Arial, Helvetica, sans-serif;">控制弹出窗口居中显示</span><span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"></title>        </span><span style="font-size:14px;">  
</span><span style="font-size:14px;"><script type="text/jscript" language="javascript">          
    function pp()        
    {        
         var hdc = window.open("new.html","new","height=280,width=800,top=10,left=20,resizable=no, location=no",false);          
         width = screen.width;  
     height = screen.height;  
     hdc.moveTo((width-322)/2,(height-206)/2);  
    }  
</script>          
</head>          
<body>  
    <button onClick = "pp()" value = "弹出"/>  
</body>          
</html></span>