页内窗口如何居中??
<html>
<head>
<title> _xWin </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<style type= 'text/css '>
<!--
body{font-size:12px;}
a:visited{text-decoration:none;color:slategray;}
a:hover{text-decoration:underline;color:slategray;}
a:link{text-decoration:none;color:slategray;}
-->
</style>
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover= 'orange ',normal= '#336699 ';//color;
var index=10000;//z-index;
//开始拖动;
function startDrag(obj)
{
if(event.button==1)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
var win = obj.parentNode;
var sha = win.nextSibling;
//记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style.left);
y1 = parseInt(win.style.top);
//记录颜色;
normal = obj.style.backgroundColor;
//改变风格;
obj.style.backgroundColor = hover;
win.style.borderColor = hover;
obj.nextSibling.style.color = hover;
sha.style.left = x1 + offx;
sha.style.top = y1 + offy;
moveable = true;
}
}
//拖动;
function drag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
sha.style.left = parseInt(win.style.left) + offx;
sha.style.top = parseInt(win.style.top) + offy;
}
}
//停止拖动;
function stopDrag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
var msg = obj.nextSibling;
win.style.borderColor = normal;
obj.style.backgroundColor = normal;
msg.style.color = normal;
sha.style.left = obj.parentNode.style.left;
sha.style.top = obj.parentNode.style.top;
obj.releaseCapture();
moveable = false;
}
}
//获得焦点;
function getFocus(obj)
{
if(obj.style.zIndex!=index)
{
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
}
//最小化;
function min(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
var tit = obj.parentNode;
var msg = tit.nextSibling;
var flg = msg.style.display== "none ";
if(flg)
{
win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
msg.style.display = "block ";
obj.innerHTML = "0 ";
}
else
{
win.style.height = parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
obj.innerHTML = "2 ";
msg.style.display = "none ";
}
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
index = index+2;
this.id = id;
this.width = w;
this.height = h;
this.left = l;
this.top = t;
this.zIndex = index;
this.title = tit;
this.message = msg;
this.obj = null;
this.bulid = bulid;
this.bulid();
}
//初始化;
function bulid()
{
var str = " "
+ " <div id=xMsg " + this.id + " "
+ "style= ' "
+ "z-index: " + this.zIndex + "; "
+ "width: " + this.width + "; "
+ "height: " + this.height + "; "
+ "left: " + this.left + "; "
+ "top: " + this.top + "; "
+ "background-color: " + normal + "; "
+ "color: " + normal + "; "
+ "font-size:8pt; "
+ "font-family:Tahoma; "
+ "position:absolute; "
+ "cursor:default; "
+ "border:2px solid " + normal + "; "
+ " ' "
+ "onmousedown= 'getFocus(this) '> "
+ " <div "
+ "style= ' "
+ "background-color: " + normal + "; "
+ "width: " + (this.width-2*2) + "; "
+ "height:20; "
+ "color:white; "
+ " ' "
+ "onmousedown= 'startDrag(this) ' "
+ "onmouseup= 'stopDrag(this) ' "
+ "onmousemove= 'drag(this) ' "
+ "ondblclick= 'min(this.childNodes[1]) ' "
+ "> "
+ " <span style= 'width: " + (this.width-2*12-4) + ";padding-left:3px; '> " + this.title + " </span> "
+ " <span style= 'width:12;border-width:0px;color:white;font-family:webdings; ' onclick= 'min(this) '> 0 </span> "
+ " <span style= 'width:12;border-width:0px;color:white;font-family:webdings; ' onclick= 'ShowHide(\ " "+this.id+ "\ ",null) '> r </span> "
+ " </div> "
+ " <div style= ' "
+ "width:100%; "
+ "height: " + (this.height-20-4) + "; "
+ "background-color:white; "
+ "line-height:14px; "
+ "word-break:break-all; "
+ "padding:3px; "
+ " '> " + this.message + " </div> "
+ " </div> "
+ " <div id=xMsg " + this.id + "bg style= ' "
+ "width: " + this.width + "; "
+ "height: " + this.height + "; "
+ "top: " + this.top + "; "
+ "left: " + this.left + "; "
+ "z-index: " + (this.zIndex-1) + "; "
+ "position:absolute; "
+ "background-color:black; "
+ "filter:alpha(opacity=40); "
+ " '> </div> ";
document.body.insertAdjacentHTML( "beforeEnd ",str);
}
//显示隐藏窗口
function ShowHide(id,dis){
var bdisplay = (dis==null)?((document.getElementById( "xMsg "+id).style.display== " ")? "none ": " "):dis
document.getElementById( "xMsg "+id).style.display = bdisplay;
document.getElementById( "xMsg "+id+ "bg ").style.display = bdisplay;
}
//-->
</script>
<script language= 'JScript '>
<!--
function initialize()
{
var a = new xWin( "1 ",160,200,200,200, "窗口1 ", "xWin <br> A Cool Pop Div Window <br> Version:1.0 <br> 2002-8-13 ");
var b = new xWin( "2 ",240,200,100,100, "窗口2 ", "Welcome to visited my personal website: <br> <a href=http://www.youthfly.net target=_blank> http://www.youthfly.net </a> <br> anducanalsosignmyguestbookat: <br> <ahref=http://www ... youthfly.net </a> <br> <br> thx!!!=)... ");
var c = new xWin( "3 ",750,700,140,10, " <center> 个人简介 </center> ", "Copyright by 网页一班! ");
ShowHide( "1 ", "none ");
ShowHide( "2 ", "none ");
ShowHide( "3 ", "none ");//隐藏窗口1
}
window.onload = initialize;
//-->
</script>
</head>
<!-- <base target= "_blank "> -->
<body onselectstart= 'return false ' oncontextmenu= 'return false '>
<a href= "javascript:ShowHide( '1 ',null) " > 窗口1 </a>
<a href= "javascript:ShowHide( '2 ',null) "> 窗口2 </a>
<a href= "javascript:ShowHide( '3 ',null) "> 窗口3 </a>
</body>
</html>
[解决办法]
ShowHide改为
--------------------------------------
function ShowHide(id,dis){
var w = document.getElementById( "xMsg "+id);
var w1 = w.nextSibling;
var bdisplay = (dis==null)?((w.style.display== " ")? "none ": " "):dis
w.style.display = bdisplay;
w1.style.display = bdisplay;
w.style.left = (document.body.clientWidth-w.style.width.replace( "px ", " "))/2;
w.style.top = (document.body.clientHeight-w.style.height.replace( "px ", " "))/2;
w1.style.left = parseInt(w.style.left) + offx;
w1.style.top = parseInt(w.style.top) + offy;
}
//resize的时候也重定位就可以了
------解决方案--------------------
function initialize()
{
var a = new xWin( "1 ",160,200,200,200, "窗口1 ", "xWin <br/> A Cool Pop Div Window <br/> Version:1.0 <br/> 2002-8-13 ");
var b = new xWin( "2 ",240,200,100,100, "窗口2 ", "Welcome to visited my personal website: <br/> <a href=http://www.youthfly.net target=_blank> http://www.youthfly.net </a> <br/> anducanalsosignmyguestbookat: <br/> <ahref=http://www ... youthfly.net </a> <br/> <br/> thx!!!=)... ");
var c = new xWin( "3 ",750,700,140,10, " <center> 个人简介 </center> ", "Copyright by 网页一班! ");
ShowHide( "1 ", "none ");
ShowHide( "2 ", "none ");
ShowHide( "3 ", "none ");//隐藏窗口1
center( '1 ');center( '2 ');center( '3 ');
}
window.onload = initialize;
//-->
function center(id)
{
xwin = document.getElementById( "xMsg "+id);
xwin.style.left = (document.body.clientWidth-xwin.style.width.replace( "px ", " "))/2;
xwin.style.top = (document.body.clientHeight-xwin.style.height.replace( "px ", " "))/2;
xwinbg = document.getElementById( "xMsg "+id+ "bg ");
xwinbg.style.left = (document.body.clientWidth-xwinbg.style.width.replace( "px ", " "))/2;
xwinbg.style.top = (document.body.clientHeight-xwinbg.style.height.replace( "px ", " "))/2;
}
加个方法,然后在初始化里加3个调用
