软件开发培训班 >> 编程开发 >> JavaScript

javascript 弹出层居中效果的制作

　　本文标签：javascript,弹出层

<!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: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>

技术文章快速查找

jquery checkbox全选、取消全选实现代码

jquery 回车事件实现代码

JavaScript调用后台的三种方法实例

两个DIV等高的JS的实现代码

多个datatable共存造成多个表格的checkbox都被选中

jquery自动将form表单封装成json的具体实现

js checkbox(复选框) 使用集锦

JavaScript 自动在表格前面增加序号

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建