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

字数 294阅读 1129

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

大体框架如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Overlay Demo</title>
    <style>
        /*Your code here*/
    </style>
</head>

<body>
    <h1>Overlay Demo</h1>
    <button id="runBtn" style="cursor: pointer;">点击运行</button>

    <script>
        "use strict";
        // Your code here
        var overlay = new Overlay({
            target: '#runBtn',
            title: '自定义标题',
            content: '自定义内容...'
        }).setWidth(460).setHeight(270);
    </script>
</body>
</html>

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

先把立即调用函数写了:

(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 = "<div class='overlay-header'>" + this.opts.title + "<div id='overlay-close'>×</div></div>";
    var content = "<div class='overlay-content'>" + this.opts.content + "</div>";
    var footer = "<div class='overlay-footer'><button id='overlay-ok'>确定</button><button id='overlay-cancel'>取消</button></div>";

    var _Overlay = document.createElement("div");
    _Overlay.setAttribute("id", "Overlay");
    _Overlay.innerHTML = "<div class='overlay-mask'></div><div class='overlay-inner'>" + title + content + footer + "</div>";

    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实现对话框

推荐阅读更多精彩内容