弹出层居中效果的制作

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

<!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=utf-8" />
<meta name="author" content="Stri" />
<link rel="start" href="http://www.14pc.com" title="Home" />
<title></title>
<style type="text/css">
* { padding:0; margin:0; list-style:none; }

body { font-family:Verdana, Geneva, sans-serif; font-size:14px; }

#a { width:300px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; }

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; }
</style>
<script language="javascript" type="text/javascript">
window.onload=function divcenter()
{   var c=document.createElement("div");
  
		
          document.body.appendChild(c);
        c.setAttribute("id","a");
	var divId=document.getElementById("a");
	    divId.innerHTML+="对浏览器变形,刷新看是否居中";
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";},200);

}
</script>
</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>

************今天又更新一步******

点击右下角的"OPEN"

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: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){

x:for(var i=1; i<100;i++){
var a=document.createElement("div");
a.innerHTML=""+i+"";
document.body.appendChild(a);}
</script>
</body>
</html>

关于每一步的理解,最后解释.毕竟代码还没完全整理
被从中间扩展缓冲的效果算法难住了!

*****************OK,也不算难****************
就是让div的left和top属性随着width一起渐变就行了

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:hover { background-color:#333; color:#fff; font-weight:bold; }

}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="divcenter();" id="aa">提交</a>
<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>

posted on 2009-09-14 22:58 stri 阅读(576) 评论(0) 收藏举报

刷新页面返回顶部

木小乐

弹出层居中效果的制作

导航

公告