JavaScript单例模式实现自定义弹框 JavaScript单例模式实现自定义弹

本文实例为大家分享了JavaScript单例模式实现自定义弹框的具体代码，供大家参考，具体内容如下
功能

自定义弹框标题
自定义弹框内容
自定义弹框确认和关闭时的回调函数

完整代码

const Dialog = (function () { class Dialog {constructor () {this.ele = document.createElement('div')this.ele.className = 'dialog'document.body.appendChild(this.ele)this.callback = nullthis.setEvent()} setContent ({ text, topicText, confirmText, cancelText } = options) {this.ele.innerHTML = nullconst top = document.createElement('div')top.className = 'top'const topic = document.createElement('span')topic.className = 'topic'topic.innerHTML = topicTextconst close = document.createElement('span')close.className = 'close'close.innerHTML = '×'top.appendChild(topic)top.appendChild(close)const middle = document.createElement('div')middle.className = 'middle'const content = document.createElement('div')content.className = 'content'content.innerHTML = textmiddle.appendChild(content)const bottom = document.createElement('div')bottom.className = 'bottom'const confirm = document.createElement('button')confirm.className = 'confirm'confirm.innerHTML = confirmTextconst cancel = document.createElement('button')cancel.className = 'cancel'cancel.innerHTML = cancelTextbottom.appendChild(confirm)bottom.appendChild(cancel)const wrap = document.createElement('div')this.ele.appendChild(top)this.ele.appendChild(middle)this.ele.appendChild(bottom)this.ele.style.display = 'block'} setEvent () {this.ele.addEventListener('click', e => {e = e || window.eventconst target = e.target || e.srcElementif (target.className === 'close') {this.ele.style.display = 'none'console.log('close')}if (target.className === 'confirm') {this.ele.style.display = 'none'this.callback(true)}if (target.className === 'cancel') {this.ele.style.display = 'none'this.callback(false)}})} } let instance = null return function (options, cb) {if (!instance) instance = new Dialog()instance.setContent(options)instance.callback = cb || function () {}return instance } })() const dialog = new Dialog({ text: '提示文字', topicText: '标题', confirmText: '确定', cancelText: '取消' }, res => { console.log(res) })

效果图