编程题之原生JS实现对话框

这是某公司2017前端实习招聘的一道编程测试题——用JS实现一个对话框，水平垂直居中，有半透明遮罩层效果。自己研究了一番，实现了题目要求的效果。

大体框架如下：

    
    
    



    
Overlay Demo
    点击运行

    

对话框可以设置标题和内容，还可以通过链式调用设置其宽高。

先把立即调用函数写了：

(function(window) {
    window.Overlay = Overlay;
}(window));

声明Overlay函数，传入配置参数并初始化：

function Overlay(opts) {
    this.opts = this.extend(this.defaults, opts);
    this.init();
}

传入配置参数具体实现：

Overlay.prototype.defaults = {
    target: null,
    width: 500,
    height: 300,
    title: '',
    content: ''
};

Overlay.prototype.extend = function(dest, src) {
    for (var prop in src) {
        if (src.hasOwnProperty(prop)) {
            dest[prop] = src[prop];
        }
    }

    return dest;
};

上述代码的意思是——有自定义的参数用自定义的，没有的话就用默认的。hasOwnProperty方法的使用，避免了原型对象扩展带来的干扰。

HTML模板实现：

Overlay.prototype.template = function() {
    var title = "
" + this.opts.title + "
×
";
    var content = "
" + this.opts.content + "
";
    var footer = "
确定取消
";

    var _Overlay = document.createElement("div");
    _Overlay.setAttribute("id", "Overlay");
    _Overlay.innerHTML = "
" + title + content + footer + "
";

    return _Overlay;
};

对话框按钮绑定点击事件：

Overlay.prototype.bindEvents = function() {
    var _Overlay = document.getElementById("Overlay");

    document.getElementById("overlay-close").addEventListener("click", function(e) {
        e.preventDefault();
        _Overlay.style.display = "none";
    });
    document.getElementById("overlay-ok").addEventListener("click", function(e) {
        e.preventDefault();
        _Overlay.style.display = "none";
    });
    document.getElementById("overlay-cancel").addEventListener("click", function(e) {
        e.preventDefault();
        _Overlay.style.display = "none";
    });
};

初始化：

Overlay.prototype.init = function() {
    var layout = this.template();

    if (this.opts.target) {
        document.body.appendChild(layout);
        document.querySelector(this.opts.target).addEventListener("click", function() {
            document.getElementById("Overlay").style.display = "block";
        });
    } else {
        document.body.appendChild(layout);
        document.body.addEventListener("click", function(e) {
            document.getElementById("Overlay").style.display = "block";
        });
    }

    this.bindEvents();
};

链式调用实现对话框宽高设置：

Overlay.prototype.setWidth = function(val) {
    var width = document.getElementsByClassName("overlay-inner")[0];
    width.style.width = val + "px";
    width.style.marginLeft = -val / 2 + "px";

    return this;
};

Overlay.prototype.setHeight = function(val) {
    var height = document.getElementsByClassName("overlay-inner")[0];
    height.style.height = val + "px";
    height.style.marginTop = -val / 2 + "px";

    return this;
};

JS的部分基本完成了，还需要通过CSS设置一下样式，部分代码如下：

#Overlay {
    display: none;
}

.overlay-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: #b3b3b3;
    opacity: 0.6;
}

.overlay-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 460px;
    margin-top: -100px;
    margin-left: -230px;
    z-index: 11;
    border-radius: 5px;
    background-color: white;
}

在线演示

个人技术博客 biebu.xin，原文链接——编程题之原生JS实现对话框