代码
主要是JS
CSS中有个技巧，灰色的背景用box-shadow
//页面居中
position:fixed;
top:50%;
left:50%
transform:translate(-50%,-50%)
function Dialog(options) { // 这是一个构造函数
this.options = options
this._prepareHtml() //加下划线的是不想给使用者用的方法
this._bindEvents()
this._mount()
}
Dialog.prototype._bindEvents = function() {
var div = this.div
var buttonCallbacks = this.options.buttonCallbacks
var dialog = this
div.addEventListener('click', function xxx(e) {
if (e.target.tagName === 'BUTTON') {
var index = parseInt(e.target.getAttribute('data-index'), 10)
if (buttonCallbacks[index].call() !== false) {
dialog.close(div)
}
}
})
}
Dialog.prototype._prepareHtml = function() {
var {title,content,buttons} = this.options
var div = this.div = document.createElement('div')
div.className = 'dialog'
var buttonString = buttons.map(function(text, index) {
return `<button data-index="${index}">${text}</button>`
}).join('\n')
var html = ` //ES6 模板字符串（可以加空格）
<header>
${title} //${
</header>
<main>
${content}
</main>
<footer>
${buttonString}
</footer>
`
div.innerHTML = html
}
Dialog.prototype.close = function () {
this.div.parentNode.removeChild(this.div)
}
Dialog.prototype._mount = function(){
document.body.appendChild(this.div)
}
/*使用者*/
/*1面向对象方案*/
// API
// close - 调用 close 可以关闭 dialog
xxx.onclick = function() {
var dialog = new Dialog({ //这里是构造函数的典型用法，使用new操作符来创建新对象。
title: '标题',
content: '你确定要删除吗？',
buttons: ['确定', '取消'],
buttonCallbacks: [function() {
console.log('他确定一定以及肯定')
return false
}, function() {
console.log('他反悔了')
}]
})
console.log(dialog)
setTimeout(function(){
dialog.close()
},3000)
}
