#使用对象标记已弹出弹框
```
<style>
*{ margin: 0; padding: 0; }
.login{ background: white; border: 1px solid gray; position: absolute; left: 0; top: 0; z-index: 2; }
.title{ height: 30px; line-height: 30px; background: gray; color: white; }
.title .close{ float: right; padding-right: 10px; cursor: pointer; }
#mark{ background: #000; filter: alpha(opacity=30); opacity: 0.3; position: absolute; left: 0; top: 0; z-index: 1; }
</style>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function () {
var d1 = new Dialog();
d1.init({ // 配置参数
iNow: 0, // 防止重复创建的标识
title: '登录'
});
};
aInput[1].onclick = function () {
var d1 = new Dialog();
d1.init({ // 配置参数
iNow: 1,
w: 300,
h: 400,
dir: 'right',
title: '公告'
});
};
aInput[2].onclick = function () {
var d1 = new Dialog();
d1.init({ // 配置参数
iNow: 2,
mark: true // 遮罩标识
});
};
};
function Dialog() {
this.oLogin = null;
this.settings = { // 默认参数
w: 300,
h: 300,
dir: 'center',
title: '',
mark: false
};
}
Dialog.prototype.json = {};
Dialog.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.fnClose();
if(this.settings.mark){
this.createMark();
}
this.json[opt.iNow] = false;
}
};
Dialog.prototype.create = function(){
var str = '';
this.oLogin = document.createElement('div');
this.oLogin.className = 'login';
str += '<div class="title">';
str += '<span>'+this.settings.title+'</span><span class="close">关闭</span>';
str += '</div>';
str += '<div class="content"></div>';
this.oLogin.innerHTML = str;
document.body.appendChild(this.oLogin);
this.setData();
};
Dialog.prototype.setData = function () {
this.oLogin.style.width = this.settings.w + 'px';
this.oLogin.style.height = this.settings.h + 'px';
if(this.settings.dir == 'center'){
this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth) / 2 + 'px';
this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) / 2 + 'px';
}else if(this.settings.dir == 'right'){
this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth) + 'px';
this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) + 'px';
}
};
Dialog.prototype.fnClose = function(){
var oClose = this.oLogin.getElementsByTagName('span')[1];
var _this = this;
oClose.onclick = function(){
document.body.removeChild(_this.oLogin);
if(_this.settings.mark){
document.body.removeChild(_this.oMark);
}
_this.json[_this.settings.iNow] = true;
};
};
Dialog.prototype.createMark = function(){
var oMark = document.createElement('div');
oMark.id = 'mark';
document.body.appendChild(oMark);
this.oMark = oMark;
oMark.style.width = viewWidth() + 'px';
oMark.style.height = viewHeight() + 'px';
};
function extend(obj1, obj2) {
for (var attr in obj2) {
obj1[attr] = obj2[attr];
}
}
function viewWidth(){
return document.documentElement.clientWidth;
}
function viewHeight(){
return document.documentElement.clientHeight;
}
</script>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<!--<div id="mark"></div>-->
```
- 01 JS面向对象及组件开发
- 02 传统的过程式编写选项卡
- 03 用面向对象封装通用选项卡
- 04 控制多个选项卡自动播放
- 05 用面向对象编写拖拽
- 06 JS面向对象及组件开发
- 07 hasOwnProperty和constructor的使用
- 08 instanceof运算符的使用
- 09 利用toString做类型判断
- 10 什么是面向对象的继承
- 11 面向对象之拷贝继承
- 12 编写继承的拖拽
- 13 继承的其他形式之类式继承
- 14 继承的其他形式之原型继承
- 15 组件开发是什么
- 16 给拖拽组件配置不同参数
- 17 封装弹框组件
- 18 使用对象标记已弹出弹框
- 19 复杂组件开发之自定义事件
- 20 原生JS实现自定义事件
- 21 自定义事件实例
- 22 基于JQ的选项卡组件开发