div屏幕居中

<!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" />

<title>DIV屏幕居中</title>

</head>

 

<body>

<script language="javascript">

var tips = function(options){

  //对象唯一标识

  this.id = 'tips_' + new Date().getTime();

 

  //对象宽高

  this.padding = options.padding || 0;

  this.msg = options.msg || '';

 

  //对象

  this.obj = document.createElement('div');

 

  //设置属性

  this.obj.id = this.id;

  this.obj.style.position = 'absolute';

  this.obj.style.margin = '0';

  this.obj.style.backgroundColor = '#FFF';

  this.obj.style.padding = this.padding + 'px';

  this.obj.innerHTML = this.msg;

 

  //加入到body

  document.body.appendChild(this.obj);

 

  //实际高度

  this.width = document.getElementById(this.id).offsetWidth;

  this.height = document.getElementById(this.id).offsetHeight;

 

  //设置top left

  var body = (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;

  var left = body.scrollLeft + (body.clientWidth - this.width)/2;

  var top = body.scrollTop + (body.clientHeight - this.height)/2;

 

  //更改位置

  this.obj.style.left = left + 'px';

  this.obj.style.top = top + 'px';

 

  this.html = function(html){

    document.getElementById(this.id).innerHTML = html;

  };

 

  //关闭

  this.close = function(){

    document.getElementById(this.id).style.display = 'none';

  };

};

//调用:

new tips({msg:'<div style="border:#CCC solid 5px;padding:10px 20px; font-size:12px; text-align:center;"><div>正在更新报表,请稍后……</div><div>这一般需要 10 秒钟</div></div>'});

</script>

</body>

</html>

你可能感兴趣的:(div屏幕居中)