标签：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
.login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0;}
.title{ height:30px; background:gray; color:white;}
.title .close{ float:right;}
</style>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName(‘input‘);
aInput[0].onclick = function(){
var d1 = new Dialog();
d1.init({ //配置参数
title : ‘登录‘
});
};
aInput[1].onclick = function(){
var d1 = new Dialog();
d1.init({ //配置参数
w : 100,
h : 400,
dir : ‘right‘,
title : ‘公告‘
});
};
};
function Dialog(){
this.oLogin = null;
this.settings = { //默认参数
w : 300,
h : 300,
dir : ‘center‘,
title : ‘‘
};
}
Dialog.prototype.init = function( opt ){
extend( this.settings , opt );
this.create();
this.fnClose();
};
Dialog.prototype.create = function(){
this.oLogin = document.createElement(‘div‘);
this.oLogin.className = ‘login‘;
this.oLogin.innerHTML = ‘<div class="title"><span>‘+ this.settings.title +‘</span><span class="close">X</span></div><div class="content"></div>‘;
document.body.appendChild( this.oLogin );
this.setData();
};
Dialog.prototype.setData = function(){
this.oLogin.style.width = this.settings.w + ‘px‘;
this.oLogin.style.height = this.settings.h + ‘px‘;
if( this.settings.dir == ‘center‘ ){
this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth)/2 + ‘px‘;
this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight)/2 + ‘px‘;
}
else if( this.settings.dir == ‘right‘ ){
this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth) + ‘px‘;
this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) + ‘px‘;
}
};
Dialog.prototype.fnClose = function(){
var oClose = this.oLogin.getElementsByTagName(‘span‘)[1];
var This = this;
oClose.onclick = function(){
document.body.removeChild( This.oLogin );
};
};
function extend(obj1,obj2){
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}
function viewWidth(){
return document.documentElement.clientWidth;
}
function viewHeight(){
return document.documentElement.clientHeight;
}
</script>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<!--<div class="login">
<div class="title">
<span>标题</span><span class="close">X</span>
</div>
<div class="content"></div>
</div>-->
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/yuzhenghua/p/4890730.html
