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

这是某公司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'>&times;</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;
}

在线演示