<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>弹窗组件</title>
<style>
* {
margin: 0;
padding: 0;
}
button {
margin: 10px;
}
.myAlert {
position: absolute;
border: 1px solid #ccc;
z-index: 2;
background: #fff;
}
.title {
background: blue;
color: #fff;
padding: 10px;
overflow: hidden;
}
.title .close {
float: right;
border: 2px silid #000;
cursor: pointer;
}
.myAlert .content {
padding: 10px;
}
#mark {
position: absolute;
background: rgba(0,0,0,.5);
z-index: 1;
top: 0;
left: 0;
}
</style>
</head>
<body>
<button id="btn1">居中弹窗</button>
<button id="btn2">右下角弹窗</button>
<button id="btn3">遮罩弹窗</button>
<div id="mark"></div>
<!-- <div class="myAlert">
<div class="title"><span>我是标题</span><span class="close">X</span></div>
<div class="content">我是内容我是内容我是内容我是内容我是内容</div>
</div> -->
</body>
<script>
(function (global){
function MyAlert(json){
this.setting = {
ele : this,
width: 300,
height: 400,
closeBtn : true,
content : '我是内容',
title: '默认',
dir : 'center'
};
extend(this.setting,json);
this.alertEle = null;
this.init();
}
MyAlert.prototype.blog = {};
MyAlert.prototype.init = function (){
this.blog[this.setting.iNow] == undefined ? this.blog[this.setting.iNow] = true:null;
if( this.blog[this.setting.iNow] ){
this.creatAlert();
this.setting.closeBtn ? this.closeFn() : null;
if(this.setting.mark){
this.setMark();
}
this.blog[this.setting.iNow] = false;
}
};
MyAlert.prototype.creatAlert = function (){
this.alertEle = document.createElement('div'),
alertEleHtml = '';
this.alertEle.className = 'myAlert';
alertEleHtml += '<div class="title">'
alertEleHtml += '<span>'+ this.setting.title +'</span><span class="close">X</span>';
alertEleHtml += '</div><div class="content">'+this.setting.content+'</div>';
this.alertEle.innerHTML += alertEleHtml
document.body.appendChild(this.alertEle);
this.setdata();
};
MyAlert.prototype.setdata = function (){
this.alertEle.style.width = this.setting.width + 'px';
this.alertEle.style.height = this.setting.height + 'px';
switch (this.setting.dir){
case 'center':
this.alertEle.style.left = (document.documentElement.clientWidth - this.setting.width)/2 + 'px';
this.alertEle.style.top = (document.documentElement.clientHeight - this.setting.height)/2 + 'px';
break;
case 'right':
this.alertEle.style.right = 0 + 'px';
this.alertEle.style.bottom = 0 + 'px';
break;
}
}
MyAlert.prototype.closeFn = function (){
var This = this;
this.alertEle.getElementsByClassName('close')[0].onclick = function (){
document.body.removeChild(This.alertEle);
if(This.markEle){
document.body.removeChild(This.markEle);
}
This.blog[This.setting.iNow] = true;
}
};
MyAlert.prototype.setMark = function (){
this.markEle = document.createElement(this.markEle);
var markEle = document.body.appendChild(this.markEle);
markEle.id = 'mark';
markEle.style.width = document.documentElement.clientWidth + 'px';
markEle.style.height = document.documentElement.clientHeight + 'px';
}
function extend(obj1,obj2){
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}
global.MyAlert = MyAlert;
})(this)
</script>
<script>
var aBtn = document.getElementsByTagName('button');
aBtn[0].onclick = function (){
var alert1 = new MyAlert({
ele : this,
width: 300,
height: 400,
closeBtn : true,
content : '我是内容，哈哈哈哈哈',
title: '登陆',
dir : 'center',
iNow : 0
});
}
aBtn[1].onclick = function (){
var alert1 = new MyAlert({
ele : this,
width: 200,
height: 100,
closeBtn : true,
content : '公告内容',
title: '公告',
dir : 'right',
iNow : 1
});
}
aBtn[2].onclick = function (){
var alert1 = new MyAlert({
ele : this,
width: 300,
height: 400,
closeBtn : true,
content : '遮罩',
title: '公告',
dir : 'right',
iNow : 2,
mark : true
});
}
</script>
</html>
