javascript 弹出层居中效果的制作

问题:做一个带拖动的弹出层效果（像提示框那种）
先写了一半,明天继续奋斗:

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
点击右下角的"OPEN"

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Stri" /> <title>javascript 弹出层居中效果的制作</title> <style type="text/css"> * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; } a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } a:hover { background-color:#333; color:#fff; font-weight:bold; } #aa { position:fixed; bottom:20px; right:10px; } </style> <script language="javascript" type="text/javascript"> var drg=true; var ns=（document.all） ？ false : true; function divcenter（） {remove（）; var c=document.createElement（"div"）; document.body.appendChild（c）; c.setAttribute（"id","a"）; c.setAttribute（"dragable","dragable"）; c.onmousedown=foo; var divId=document.getElementById（"a"）;divId.innerHTML+="出现代码异常！<br>错误编号:0015;"; divId.style.left=（document.documentElement.clientWidth-divId.clientWidth）/2+document.documentElement.scrollLeft+"px"; setTimeout（function（）{divId.style.top=（document.documentElement.clientHeight-divId.clientHeight）/2+document.documentElement.scrollTop-50+"px";},100）; } //移除 function remove（）{ if（document.getElementById（"a"）） {document.body.removeChild（document.getElementById（"a"））; }}function foo（）{ if（drg）{ if（document.getElementById（"a"）！=null） { obj=document.getElementById（"a"）; document.onmousedown=m_d; document.onmouseup=m_u; } } else { document.onmousemove=no_f;document.onmousedown=no_f;document.onmouseup=no_f;} } function m_d（e）{document.onmousemove=m_m;x=（ns）？e.pageX:event.x;y=（ns）？e.pageY:event.y;cx=obj.offsetLeft-x;cy=obj.offsetTop-y; } function m_m（e）{ drg=false;x=（ns）？e.pageX:event.x;y=（ns）？e.pageY:event.y;obj.style.left=（cx+x）+"px";obj.style.top=（cy+y）+"px";} function m_u（）{ drg=true; document.onmousedown=no_f; document.onmousemove=no_f; document.onmouseup=no_f; } function no_f（）{ return false;} </script> </head> <body> open <script type="text/javascript"> x:for（var i=1; i<100;i++）{ var a=document.createElement（"div"）; a.innerHTML=""+i+""; document.body.appendChild（a）;} </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
关于每一步的理解,最后解释.毕竟代码还没完全整理
被从中间扩展缓冲的效果算法难住了！
*****************OK,也不算难****************
就是让div的left和top属性随着width一起渐变就行了

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Stri" /> <title>javascript 弹出层居中效果的制作</title> <style type="text/css"> * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; } a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } a:hover { background-color:#333; color:#fff; font-weight:bold; } #aa { position:fixed; bottom:20px; right:10px; } </style> <script language="javascript" type="text/javascript"> var drg=true; var ns=（document.all） ？ false : true; function divcenter（） {remove（）; var c=document.createElement（"div"）; document.body.appendChild（c）; c.setAttribute（"id","a"）; c.setAttribute（"dragable","dragable"）; c.onmousedown=foo; var divId=document.getElementById（"a"）;divId.innerHTML+="出现代码异常！<br>错误编号:0015;"; //divId.style.left=（document.documentElement.clientWidth-divId.clientWidth）/2+document.documentElement.scrollLeft+"px"; //setTimeout（function（）{divId.style.top=（document.documentElement.clientHeight-divId.clientHeight）/2+document.documentElement.scrollTop-50+"px";},100）; h_w（300,80）; } //移除 function remove（）{ if（document.getElementById（"a"）） {document.body.removeChild（document.getElementById（"a"））; }}function foo（）{ if（drg）{ if（document.getElementById（"a"）！=null） { obj=document.getElementById（"a"）; document.onmousedown=m_d; document.onmouseup=m_u; } } else { document.onmousemove=no_f;document.onmousedown=no_f;document.onmouseup=no_f;} } function m_d（e）{document.onmousemove=m_m;x=（ns）？e.pageX:event.x;y=（ns）？e.pageY:event.y;cx=obj.offsetLeft-x;cy=obj.offsetTop-y; } function m_m（e）{ drg=false;x=（ns）？e.pageX:event.x;y=（ns）？e.pageY:event.y;obj.style.left=（cx+x）+"px";obj.style.top=（cy+y）+"px";} function m_u（）{ drg=true; document.onmousedown=no_f; document.onmousemove=no_f; document.onmouseup=no_f; } function no_f（）{ return false;}function h_w（a,b）{ divId=document.getElementById（"a"）; divId.style.width="0px"; divId.style.height="0px"; var s=function（）{ var w=parseInt（divId.style.width）; if（w </head> <body> 提交 <script type="text/javascript"> x:for（var i=1; i<100;i++）{ var a=document.createElement（"div"）; a.innerHTML=""+i+""; document.body.appendChild（a）;} </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]