粗制版的封装组件

.dialog { width: 150px; height: 50px; line-height: 50px; font-weight: bold; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 5px; background-color: pink; text-align: center; color: #000; }

js代码区域：

Dialog = function (obj) { this.div = document.createElement('div') this.div.innerText = obj.title this.div.classList.add('dialog') document.body.appendChild(this.div) this.on = function (type, callback) { console.log(this) let dialog = document.getElementsByClassName('dialog') if (type == 'show') { this.div.style.display = 'block' callback() } else if (type == 'close') { this.div.style.display = 'none' callback() } } }

实例化一下，即可 let dialog = new Dialog({title: '这是标题'})

转载于:https://www.cnblogs.com/zjh-study/p/10721600.html

相关资源：JAVA上百实例源码以及开源项目