JavaScript特效实例005-控制弹出窗口居中显示

来源：互联网发布：广数英制螺纹编程代码编辑：程序博客网时间：2024/05/16 07:53

实例005 控制弹出窗口居中显示

实例说明

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

技术要点

本例首先应用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>

注：style标签的内容为css的知识，我们关注的是script标签内的内容。

这样我们的这个实例就做好了。

1 0