弹窗组件

Posted 2020-10-23 carol72

html

<input type="button"  value="1" />
<input type="button"  value="2" />

<!--<div class="login">
	<div class="title">
		<span>标题</span><span class="close">X</span>
	</div>
	<div class="content"></div>
</div>-->

CSS

*{
	margin: 0;
	padding: 0;
}
.login{
	/*width: 300px;
	height: 300px;*/
	background: #fff;
	border: 1px solid #000;
	position: absolute;
}
.title{
	height: 30px;
	background: gray;
	color: #fff;
}
.close{
	float: right;
}

JS

/*
组件开发：多组对象，像兄弟之间的关系（代码复用的一种形式）
 * */
var aInput=document.getElementsByTagName(‘input‘);
aInput[0].onclick=function(){
	 var dl=new Dialog();
	 dl.init({
	 	title:‘登录框‘
	 });
}
aInput[1].onclick=function(){
	 var dl=new Dialog();
	 dl.init({
	 	w:200,
	 	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();
}
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.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‘;
	}
}
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;
}