JS让打开的窗口居中
JS让打开的窗口居中1、window.open打开窗口居中的方法
本例使用“(screen.width-width)/2”和“(screen.height-height)/2”获取窗体居中的坐标点，然后指定窗体的“left”和“top”属性。
<html>
<head>
<title>标题页</title>
<script language="javascript">
//参数-url表示要打开的网站，winname表示打开后的窗体名称
//参数windth表示打开窗体的宽度，height表示打开窗体的高度
<!--
function openwindow( url,winName,width,height)
{
xposition=0; yposition=0;
if ((parseInt(navigator.appVersion) >= 4 ))
{
xposition = (screen.width - width) / 2; //窗体居中的x坐标
yposition = (screen.height - height) / 2; //窗体居中的y坐标
}
theproperty= "width=" + width + "," //打开窗口的属性
+ "height=" + height + ","
+ "location=0,"
+ "menubar=0,"
+ "resizable=1,"
+ "scrollbars=0,"
+ "status=0,"
+ "titlebar=0,"
+ "toolbar=0,"
+ "hotkeys=0,"
+ "screenx=" + xposition + "," //仅适用于Netscape
+ "screeny=" + yposition + "," //仅适用于Netscape
+ "left=" + xposition + "," //IE
+ "top=" + yposition; //IE
window.open( url,winName,theproperty ); //打开窗口
}//-->
</script>
</head>
<body>
<a href="javascript:openwindow('http://www.studyofnet.com','openwin',300,300)">
打开窗口</a></body>
</html>
2、js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
<!doctype html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
html{_background:url(about:blank);} /* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */
body{background:#fff; font: 12px/1.5 Tahoma,Geneva, \\5b8b\\4f53, sans-serif; height:100%;}
.wrap{height:980px; padding-top:20px;text-align:center;}
p{font-size:14px;text-align:center;line-height:24px;}
/** 遮罩层 **/
#masklayer{
background:#000;
display:none;
filter:alpha(opacity = 50);
opacity:0.5;
top:0;
left:0;
height:100%;
width:100%;
z-index:999;
position:fixed;
_position:absolute;
_left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
_top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
}
/** 弹出层 **/
#popup{
display:none;
width:300px;
z-index:1000;
left:50%;
top:50%;
position:fixed!important;
margin-left:-150px !important;
_position:absolute;
_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')?
documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
}
.content{background:#f3f3f3;border:1px solid #999;}
.content h3{background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px; padding-left:5px;}
#clickbtn{margin-top:20px;}
</style>
</head>
<body>
<li class="wrap">
<p>
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
标签：