您的位置：首页 > Web前端 > JavaScript
js面向对象组件开发---弹窗

2017-06-30 20:30 375 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
margin: 100px;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #DD8D7C;
position: absolute;
left: 50px;
top: 50px;
z-index: 2;
}

.box .title{
height: 40px;
line-height: 40px;
background: #d8d8d8;
}

.box .title .close{
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
}
.mark{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<input type="button" name="" id="" value="弹窗1" />
<input type="button" name="" id="" value="弹窗2" />
<input type="button" name="" id="" value="弹窗3" />
<!--<div class="box">
<div class="title">
<span>弹窗</span>
<span class="close">X</span>
<div class="con">XXX</div>
</div>
</div>-->
<!--<div class="mark"></div>-->
</body>
<script type="text/javascript">
window.onload = function(){
var aBtns = document.getElementsByTagName('input');
aBtns[0].onclick = function(){
var d1 = new Dialog();
d1.init({
w:200,

4000
h:200,
title:'最新消息',
con:'今天周五',

})
};

aBtns[1].onclick = function(){
var d2 = new Dialog();
d2.init({
w:300,
h:300,
title:'qq',
con:'hi',
dir:'right',
})
}

aBtns[2].onclick = function(){
var d3 = new Dialog();
d3.init({
w:400,
h:400,
title:'微信',
con:'hello',
mark:true
})
}

}

function Dialog(){
this.oBox = null;
this.oMark = null;
this.setting = { //配置参数
w:300,
h:300,
dir:'center',
title:'',
mark:false
}
}

Dialog.prototype.init = function(opt){
extend(this.setting,opt);

this.creat();
this.dir();
this.close();
if(this.setting.mark){
this.mark();
}

}
//动态创建窗口
Dialog.prototype.creat = function(){
this.oBox = document.createElement('div');
this.oBox.className = "box";
this.oBox.innerHTML = '<div class="title"><span>'+this.setting.title+'</span><span class="close">X</span><div class="con">'+this.setting.con+'</div></div>'
document.body.appendChild(this.oBox);
}

//加一层纱
Dialog.prototype.mark = function(){
this.oMark = document.createElement('div');
this.oMark.className = "mark";
document.body.appendChild(this.oMark);
}

//窗口大小和位置
Dialog.prototype.dir = function(){
this.oBox.style.width = this.setting.w + 'px';
this.oBox.style.height = this.setting.h +'px';
if(this.setting.dir == 'center'){
this.oBox.style.left = (vieww() - this.oBox.offsetWidth)/2 + "px";
this.oBox.style.top = (viewh() - this.oBox.offsetHeight)/2 + "px";
}

if(this.setting.dir == 'right'){
this.oBox.style.left = vieww() - this.oBox.offsetWidth + "px";
this.oBox.style.top = viewh() - this.oBox.offsetHeight + "px";
}
}

//关闭窗口
Dialog.prototype.close = function(){
var oClose = this.oBox.getElementsByClassName('close')[0];
var _this = this;
oClose.onclick = function(){
document.body.removeChild( _this.oBox);
if(_this.setting.mark){
document.body.removeChild( _this.oMark);
}
}
}

function vieww(){
return  document.documentElement.clientWidth;
}

function viewh(){
return   document.documentElement.clientHeight;
}
//      拷贝
function extend(obj1,obj2){
for(var i in obj2){
obj1[i] = obj2[i];
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： 面向对象
相关文章推荐
新的分享
章节导航