面向对象组件开发一个弹窗

组件是对面向对象的加深应用（开发UI组件，功能组件）将配置参数、方法、事件，三者进行分离

window.onload = function() {
    var aBtn = document.getElementsByTagName('input');

    //显示在中间，用默认参数即可
    aBtn[0].onclick = function() {
        //alert(1);
        var d1 = new Dialog();
        d1.init({ //配置参数
            iNow: 0,
            title: '登陆框'
        });
    }

    //显示在右下角的公告栏
    aBtn[1].onclick = function() {

        var d1 = new Dialog();
        d1.init({ //配置参数
            iNow: 1,
            w: 100,
            h: 400,
            dir: 'right_bottom',
            title: '公告框'
        });
    }

    //显示在中间，并且有遮罩
    aBtn[2].onclick = function() {

        var d1 = new Dialog();
        d1.init({ //配置参数
            iNow: 2,
            w: 400,
            h: 400,
            dir: 'center',
            title: '遮罩框',
            mask: true
        });
    }

}

function Dialog() { //构造函数
    this.oDiv = null;
    this.omask = null;
    this.setting = { //默认参数
        w: 300,
        h: 300,
        dir: 'center',
        title: '',
        mask: false
    }

}

Dialog.prototype.json = {

}//传入json，函数接受一个参数

function extend(obj1, obj2) { //配置参数方法
    for(var i in obj2) {
        obj1[i] = obj2[i];
    }
}

Dialog.prototype.init = function(opt) { //构建方法
    extend(this.setting, opt);//替换默认参数

    if(this.json[opt.iNow] == undefined) {
        this.json[opt.iNow] = true;
    }

    if(this.json[opt.iNow]) {
        this.create();
        this.setData();
        this.close();

        if(this.setting.mask) {
            this.mask();
        }
        this.json[opt.iNow] = false;
    }

}

Dialog.prototype.create = function() { //构建方法实现创建节点
    this.oDiv = document.createElement('div');
    this.oDiv.className = 'login';
    this.oDiv.innerHTML = '<div class="title"><span>' + this.setting.title + '</span><span class="close">X</span></div><div class="content">内容</div>';
    document.body.appendChild(this.oDiv);
}

Dialog.prototype.setData = function() { //构建方法设置配置参数
    this.oDiv.style.width = this.setting.w + 'px';
    this.oDiv.style.height = this.setting.h + 'px';
    if(this.setting.dir == 'center') {

        this.oDiv.style.left = (viewWidth() - this.oDiv.offsetWidth) / 2 + 'px';
        this.oDiv.style.top = (viewHeight() - this.oDiv.offsetHeight) / 2 + 'px';
    } else if(this.setting.dir == 'right_bottom') {
        this.oDiv.style.left = (viewWidth() - this.oDiv.offsetWidth) + 'px';
        this.oDiv.style.top = (viewHeight() - this.oDiv.offsetHeight) + 'px';
    }
}

Dialog.prototype.close = function() { //构建方法：关闭弹窗
    var _this = this;
    var oClose = this.oDiv.getElementsByTagName('span')[1];
    oClose.onclick = function() {
        document.body.removeChild(_this.oDiv);
        if(_this.setting.mask) {
            document.body.removeChild(_this.omask);
        }
        _this.json[_this.setting.iNow] = true;

    }
}

Dialog.prototype.mask = function() {

    this.omask = document.createElement('div');
    this.omask.className = 'mask';
    document.body.appendChild(this.omask);
    this.omask.style.width = viewWidth() + 'px';
    this.omask.style.height = viewHeight() + 'px';
}

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

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

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .login {
                border: 1px solid #d8d8d8;
                position: absolute;
                z-index: 2;
            }
            
            .login .title {
                height: 40px;
                background: #d8d8d8;
            }
            
            .login .title .close {
                float: right;
                cursor: pointer;
            }
            
            .login .content {
                background: #fff;
            }
            
            .mask {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                background: rgba(0, 0, 0, 0.6);
            }
        </style>
        <script type="text/javascript" src="js/myAlert.js"></script>
    </head>
    <body>
        <input type="button" name="" id="" value="登陆框" />
        <input type="button" name="" id="" value="公告框" />
        <input type="button" name="" id="" value="遮罩框" />
        <!--<div class="login">
            <div class="title">
                <span>登陆框</span>
                <span class="close">X</span>
            </div>
            <div class="content">
                内容
            </div>
        </div>-->
        <!--<div class="mask"></div>-->
    </body>

</html>

相关阅读:
Elasticsearch 缓存总结
 ElasticSearch-集群
 HTTP协议详解
 HTTPS总结
 ElasticSearch--Document
正排索引和倒排索引
 线上OOM排查步骤总结
 线程池-四种拒绝策略总结
 netty篇-练手
 netty篇-UDP广播
原文地址：https://www.cnblogs.com/rlann/p/7111445.html