码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-05-10 11:32:57      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:javascript

实例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标签内的内容。
这样我们的这个实例就做好了。




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

标签:javascript

原文地址:http://blog.csdn.net/yejinwei1220/article/details/45618261

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!