這是某公司2017前端實習招聘的一道編程測試題——用JS實現(xiàn)一個對話框，水平垂直居中，有半透明遮罩層效果。自己研究了一番，實現(xiàn)了題目要求的效果。
大體框架如下：
<!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: '自定義內(nèi)容...'
}).setWidth(460).setHeight(270);
</script>
</body>
</html>
對話框可以設置標題和內(nèi)容，還可以通過鏈式調(diào)用設置其寬高。
先把立即調(diào)用函數(shù)寫了：
(function(window) {
window.Overlay = Overlay;
}(window));
聲明Overlay函數(shù)，傳入配置參數(shù)并初始化：
function Overlay(opts) {
this.opts = this.extend(this.defaults, opts);
this.init();
}
傳入配置參數(shù)具體實現(xiàn)：
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;
};
上述代碼的意思是——有自定義的參數(shù)用自定義的，沒有的話就用默認的。hasOwnProperty方法的使用，避免了原型對象擴展帶來的干擾。
HTML模板實現(xiàn)：
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();
};
鏈式調(diào)用實現(xiàn)對話框?qū)捀咴O置：
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實現(xiàn)對話框
