这是某公司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实现对话框
