daiLog2.js
//function Dialog({iw=400,ih=400,posi='center',mark=false}) {//構造函數：屬性 es6寫法
function Dialog() {
/*
作者：金哥
時間：
github：
說明：Dialog()是一個彈窗組件，具備三個款式
參數：
{
id : id,不能重復，必選的
iw : 寬度,可選的，默認：400
ih : 高度,可選的，默認：400
posi : 位置,可選的，默認：居中 center，還可以寫右下角 'rightbottom'
mark : 是否有遮罩，true有遮罩，false沒有遮罩.可選，默認false,
con : 彈窗的內容，必填
}
*/
//節點查找
this.boxdiv = null;
this.mark = null;
//默認參數
this.defaults = {
'iw': 400,
'ih': 400,
'posi': 'center',
'mark': false
}
}
function extend(obj1, obj2) { //拷貝
for (var key in obj1) {
obj2[key] = obj1[key];
}
}
//原型下面：放公共的屬性和方法
Dialog.prototype.status = { //多組開關控制彈窗不能同時刻出現相同彈窗
// 1 : false//已經創建登陸框
// 2 : true,
// 3 : true
}
Dialog.prototype.init = function (opt) {
//替補方案
extend(opt, this.defaults);//用的參數：this.defaults
if (!this.status[this.defaults.id]) {//第一次點擊：undefined，第二次起：拿到false
//如果狀態為假，證明沒有創建過該彈窗，允許創建
//創建節點
this.create();
//設置數據
this.setdata();
//刪除節點
this.del();
this.status[this.defaults.id] = true;//不允許創建
}
}
Dialog.prototype.create = function () {
//創建節點
this.boxdiv = document.createElement('div');
this.boxdiv.className = 'box';
this.boxdiv.innerHTML = '<h2>登陸框</h2>' +
'<p>' + this.defaults.con + '</p>' +
'<span class="close">X</span>';
document.body.appendChild(this.boxdiv);
//創建遮罩
if (this.defaults.mark) {//創建遮罩
//為真就要創建遮罩div
this.mark = document.createElement('div');
this.mark.className = 'mark';
document.body.appendChild(this.mark);
css(this.mark, 'height', window.innerHeight + 'px');
}
}
Dialog.prototype.setdata = function () {
//設置數據
css(this.boxdiv, 'width', this.defaults.iw + 'px');//設置寬度
css(this.boxdiv, 'height', this.defaults.ih + 'px');
if (this.defaults.posi == 'center') {
var l = (window.innerWidth - this.boxdiv.offsetWidth) / 2 + 'px';
var t = (window.innerHeight - this.boxdiv.offsetHeight) / 2 + 'px';
}
if (this.defaults.posi == 'rightbottom') {
var l = window.innerWidth - this.boxdiv.offsetWidth + 'px';
var t = window.innerHeight - this.boxdiv.offsetHeight + 'px';
}
css(this.boxdiv, 'left', l);
css(this.boxdiv, 'top', t);
}
Dialog.prototype.del = function () {
//刪除節點
var close = this.boxdiv.getElementsByClassName('close')[0];
close.onclick = function () {
//刪除遮罩
if (this.defaults.mark) {
document.body.removeChild(this.mark);
}
document.body.removeChild(this.boxdiv);
this.status[this.defaults.id] = false;//允許創建
}.bind(this);//修正指向
}
commo.js
function on(ele, type, fn) {
//ele：節點 type : 事件類型，沒有on的；fn：回調函數
if(ele.addEventListener) {
//高級瀏覽器
ele.addEventListener(type, fn, false);
} else {
ele.attachEvent('on' + type, fn); //onclick
}
}
以下是內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
.box {
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
background: #fff;
z-index: 5;
}
.close {
display: block;
width: 20px;
height: 20px;
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
background: #ccc;
}
.mark {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
background: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="登陸框" />
<input type="button" name="btn2" id="btn2" value="公告框" />
<input type="button" name="btn3" id="btn3" value="遮罩框" />
<!--<div class="box">
<h2>登陸框</h2>
<p>內容</p>
<span class="close">X</span>
</div>
<div class="mark"></div>-->
</body>
</html>
<script src="./common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/diaLog2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//找到節點
var btns = document.querySelectorAll('input');
//組件：彈窗組件，不同點：大小不同、位置不同、是否遮罩不同；相同：點擊的時候才創建；點擊關閉刪掉
btns[0].onclick = function () {
//款式一:登陸框
var d1 = new Dialog();//創建實例
d1.init({//配置參數
'id': 1,//同一個彈窗同一個時間內不能出現兩次
'iw': 400,
'ih': 400,
'posi': 'center',
'mark': false,
'con': '登陸框'
});//功能的入口
}
btns[1].onclick = function () {
//款式二：公告框
var d2 = new Dialog();//創建實例
d2.init({//配置參數
'id': 2,//同一個彈窗同一個時間內不能出現兩次
'iw': 200,
'ih': 400,
'posi': 'rightbottom',
'mark': false,
'con': '公告框'
});//功能的入口
}
btns[2].onclick = function () {
//款式三:遮罩框
var d1 = new Dialog();//創建實例
d1.init({//配置參數
'id': 3,//同一個彈窗同一個時間內不能出現兩次
'iw': 300,
'ih': 200,
'posi': 'center',
'mark': true,
'con': '遮罩框'
});//功能的入口
}
</script>