弹窗组件

HTML

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

<!--<div id="mark"></div>-->

　　

CSS

*{
	margin: 0;
	padding: 0;
}
.login{
	/*width: 300px;
	height: 300px;*/
	background: #fff;
	border: 1px solid #000;
	position: absolute;
	z-index: 2;
}
.title{
	height: 30px;
	background: gray;
	color: #fff;
}
.close{
	float: right;
}
#mark{
	background: #000;
	filter: alpha(opacity=50);
	opacity: 0.5;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}　　

JS

/*
组件开发：多组对象，像兄弟之间的关系（代码复用的一种形式）
 * */
var aInput=document.getElementsByTagName('input');
aInput[0].onclick=function(){
	var dl=new Dialog();
	dl.init({
	 	iNow:0,
	 	title:'登录框'
	});
}
aInput[1].onclick=function(){
	var dl=new Dialog();
	dl.init({
	 	iNow:1,
	 	w:200,
	 	h:400,
	 	dir:'right',
	 	title:'提示框'
	});
}
aInput[2].onclick=function(){
	var dl=new Dialog();
	dl.init({
	 	iNow:2,
	 	title:'带遮罩提示框',
	 	mark:true
	});
}

function Dialog(){
	this.oLogin=null;
	this.settings={ //默认参数
		w:300,
		h:300,
		dir:'center',
		title:'',
		mark:false
	};
}
Dialog.prototype.json={};
Dialog.prototype.init=function(opt){
	extend(this.settings,opt);
	if(this.json[opt.iNow]==undefined){
		this.json[opt.iNow]=true;
	}
	
	if(this.json[opt.iNow]){
		this.create();
		if(this.settings.mark){
			this.createMark();
		}
		this.json[opt.iNow]=false;
	}
}
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();
	this.close();
}
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.right=0;
//		this.oLogin.style.bottom=0;
		this.oLogin.style.left=viewWidth()-this.oLogin.offsetWidth+'px';
		this.oLogin.style.top=viewHeight()-this.oLogin.offsetHeight+'px';
	}
}
Dialog.prototype.close=function(){
	var This=this;
	var oClose=this.oLogin.getElementsByTagName('span')[1];
	oClose.onclick=function(){
		document.body.removeChild(This.oLogin);
		if(This.settings.mark){
			document.body.removeChild(This.oMark);
		}
		This.json[This.settings.iNow]=true;
	}
}
Dialog.prototype.createMark=function(){
	this.oMark=document.createElement('div');
	this.oMark.id='mark';
	
	document.body.appendChild(this.oMark);
	this.oMark.style.width=viewWidth()+'px';
	this.oMark.style.height=viewHeight()+'px';
}
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;
}