zoukankan html css js c++ java

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

组件是对面向对象的加深应用（开发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>

查看全文

相关阅读:
LeetCode "Super Ugly Number" !
LeetCode "Count of Smaller Number After Self"
LeetCode "Binary Tree Vertical Order"
LeetCode "Sparse Matrix Multiplication"
LeetCode "Minimum Height Tree" !!
HackerRank "The Indian Job"
HackerRank "Poisonous Plants"
HackerRank "Kundu and Tree" !!
LeetCode "Best Time to Buy and Sell Stock with Cooldown" !
HackerRank "AND xor OR"

原文地址：https://www.cnblogs.com/rlann/p/7111445.html