您的位置：首页 > Web前端 > JavaScript
原生js开发的弹框组件

2016-01-27 15:57 162 查看
<!doctype html>
<html lang="en" ng-app = 'myApp' >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{ margin:0; padding:0;}
input { width:60px; height: 30px;}
.login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0;}
.title{ height:30px; line-height: 30px; background:gray; color:white;}
.title .close{ float:right; width:30px; height: 30px;  text-align: center;  cursor: pointer; line-height: 30px;}
</style>

<script type="text/javascript">

window.onload = function(){
var aInput = document.getElementsByTagName("input");

aInput[0].onclick = function(){

var p1  = new oPop();
p1.init({
iNow : 0,
title:"我是标题1",
w : 300,
h :300,
dir:"center"
})
}

aInput[1].onclick = function(){
var p2  = new oPop();
p2.init({
iNow:1,
title:"我是标题2",
w :120,
h :300,
dir:"right"
})
}

function oPop(){
this.opoup = null;
this.settings = {
id : "login",
w : 300,
h: 200
}
}
oPop.prototype.json = {}//为了防止多次点击,只能点击一次
oPop.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();
this.close();
this.json[opt.iNow] = false;
}
}

oPop.prototype.create = function(){//创建弹框DOM
this.opoup = document.createElement("div");
this.opoup.className = "login";
this.opoup.innerHTML = '<div class="title"><span>'+this.settings.title+'</span><span class="close">×</span></div><div class="content"></div>';

document.body.appendChild(this.opoup);

this.opoup.style.width = this.settings.w + 'px';
this.opoup.style.height = this.settings.h + 'px';

if(this.settings.dir =="center"){

this.opoup.style.left  = (viewWidth() - this.opoup.offsetWidth)/2 + 'px';
this.opoup.style.top  = (viewHeight() - this.opoup.offsetHeight)/2 + 'px';

}
else if( this.settings.dir == 'right' ){
this.opoup.style.left =  (viewWidth() - this.opoup.offsetWidth) + 'px';
this.opoup.style.top =  (viewHeight() - this.opoup.offsetHeight) + 'px';
}
}

oPop.prototype.close = function(){//右侧关闭按钮

var aSpan = document.getElementsByTagName("span");
var This = this;

aSpan[1].onclick = function(){
document.body.removeChild(This.opoup);
This.json[This.settings.iNow] = true; //在关闭按钮的时候 变成true 然后下次可点击
}
}

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

function viewHeight(){
return document.documentElement.clientHeight;
}

function extend ( obj1,obj2){
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}

}

</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航