您的位置：首页 > Web前端 > JavaScript

js面向对象（三）组件开发实现弹窗效果

2018-03-21 15:29 776 查看

组件开发：多组对象，像兄弟之间的关系（也是代码复用的一种形式）
组件开发需要解决的问题：1、参数的顺序问题 2、参数不写报错的问题
解决办法：主要就是通过设置默认参数和配置参数
话不多说，直接上代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象之组件开发之弹窗练习</title>
<style>
*{margin:0; padding:0;}
.btn{width:50px; height:30px; background:yellowgreen; margin-left:30px;}
.div1{border:1px solid black; position:absolute; left:0px; top:100px;z-index:2;}
.title{height:30px; line-height:30px; background:lightgray;}
.close{display:inline-block; width:28px; height:28px;border:1px solid white; float:right; text-align:center;border-radius:50%; line-height:28px; color:red; }
.close:hover{background:red; color:#fff;}
#mark{z-index:1;position:absolute; left:0; top:0; background:gray; filter:alpha(opacity=50); opacity:0.5;}
</style>
</head>
<body>
<input class="btn" type="button" value="按钮1">
<input class="btn" type="button" value="按钮2">
<input class="btn" type="button" value="按钮3">

<script>
window.onload = function(){

var aBtn = document.getElementsByClassName('btn');
aBtn[1].onclick = function(){
var win2 = new Wind();
win2.init({//配置参数
iNow:1,
w:200,
h:300,
dir:'right',
title:"公告"
});
}
aBtn[0].onclick = function(){
var win1 = new Wind();
win1.init({//配置参数
iNow:0,
title:"登录"
});
}
aBtn[2].onclick = function(){//配置参数
var win1 = new Wind();
win1.init({
iNow:2,
mark:true
});
}

}
function Wind(){

this.oDiv = null;
this.setting = {//默认参数
w:300,
h:300,
dir:'center',
title:'',
mark:false
}
}
Wind.prototype.json={};
Wind.prototype.init = function(opt){

extend(this.setting,opt);
if(this.json[opt.iNow]==undefined){
this.json[opt.iNow]=true;
}
if(this.json[opt.iNow]){
this.fnCreate();
this.fnClose();
if(this.setting.mark){
this.fnMark();
}
}
this.json[opt.iNow]=false;

}
Wind.prototype.fnCreate = function(){

this.oDiv = document.createElement('div');
this.oDiv.className = 'div1';
this.oDiv.innerHTML = '<div class="title"><span>'+ this.setting.title+'</span><a class="close">X</a></div><div class="content"></div>';
document.body.appendChild(this.oDiv);
this.setStyle();
}
Wind.prototype.fnMark = function(){
var oMark = document.createElement('div');
oMark.id = 'mark';
document.body.appendChild(oMark);
this.oMark = oMark;
oMark.style.width=veiwWidth()+'px';
oMark.style.height=veiwHeight()+'px';

}
Wind.prototype.setStyle = function(){
this.oDiv.style.width = this.setting.w+'px';
this.oDiv.style.height = this.setting.h +'px';
if(this.setting.dir=='center'){
this.oDiv.style.left = (veiwWidth() - this.oDiv.offsetWidth)/2 +'px';
this.oDiv.style.top = (veiwHeight() - this.oDiv.offsetHeight)/2 +'px';
}
if(this.setting.dir=='right'){
this.oDiv.style.left = (veiwWidth() - this.oDiv.offsetWidth)+'px';
this.oDiv.style.top = (veiwHeight() - this.oDiv.offsetHeight) +'px';
}
}
Wind.prototype.fnClose = function(){
var oClose = this.oDiv.getElementsByClassName('close')[0];
var This = this;
oClose.onclick = function(){
document.body.removeChild(This.oDiv);
if(This.setting.mark){
document.body.removeChild(This.oMark);
}
This.json[This.setting.iNow] = true;
};

}

function extend(obj1,obj2){
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}
function veiwWidth(){
return document.documentElement.clientWidth;
}
function veiwHeight(){
return document.documentElement.clientHeight;
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 面向对象之组件开发

相关文章推荐

新的分享

章节导航