创建一个页面提示框，使用函数方法调用

这是一个页面常用弹出框提示的class类，使用函数的方法调用，并支持传入确认和关闭的回调函数success、fail以及自定义样式等。

class Alert {
      constructor(data) {
        this.data = data
      }
      init() {
        this.createBackgroundBox()
        this.initALertParent()
        this.createBtns()
        this.createTitleBox()
        this.initContent()
        this.mount()
        this.bindEvent()
        document.body.appendChild(this.bgBox)
      }
      mount() {
        this.parent.appendChild(this.title)
        this.parent.appendChild(this.content)
        this.btnBox.appendChild(this.closeBtn)
        this.btnBox.appendChild(this.confirmBtn)
        this.parent.appendChild(this.btnBox)
        this.bgBox.appendChild(this.parent)
      }
      bindEvent() {
        this.confirmBtn.onclick = this.data.success || this.close
        this.closeBtn.onclick = this.data.fail || this.close
      }
      createBtns() {
        const btnDiv = document.createElement('div')
        btnDiv.style.height = '50px'
        btnDiv.style.lineHeight = '1'
        btnDiv.style.display = 'flex'
        btnDiv.style.justifyContent = 'center'
        btnDiv.style.alignItems = 'center'
        btnDiv.style.borderTop = '1px solid #e0e0e0'

        const closeBtn = document.createElement('a')
        closeBtn.innerHTML = this.data.closeText || '关闭'
        closeBtn.className = this.data.closeClassName || 'close-btn'
        this.setBtnStyle(closeBtn)

        const confirmBtn = document.createElement('a')
        confirmBtn.className = this.data.confirmClassName || 'submit-btn'
        confirmBtn.innerHTML = this.data.confirmText || '确认'
        this.setBtnStyle(confirmBtn)

        this.closeBtn = closeBtn
        this.confirmBtn = confirmBtn
        this.btnBox = btnDiv
      }
      setBtnStyle(btn) {
        btn.style.display = 'inline-block'
        btn.style.padding = '10px'
      }
      initContent() {
        const content = document.createElement('p')
        content.innerHTML = this.data.content || ''
        const defaultStyle = {
          height: `calc(${this.data.height} - 118px)`,
          textAlign: 'left',
          padding: '10px',
          overflow: 'auto'
        }
        const contentStyle = Object.assign({}, defaultStyle, this.data.contentStyle)
        for (let key in contentStyle) {
          content.style[key] = contentStyle[key]
        }
        content.className = this.data.contentClassName || 'dialog-content'
        this.content = content
      }
      initALertParent() {
        const parent = document.createElement('div')
        const defaultStyle = {
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translateX(-50%) translateY(-50%)',
          width: this.data.width || '700px',
          height: this.data.height || '400px',
          backgroundColor: '#fff',
        }

        const parentStyle = Object.assign({}, defaultStyle, this.data.parentStyle)
        for (let key in parentStyle) {
          parent.style[key] = parentStyle[key]
        }

        this.parent = parent
      }
      createTitleBox() {
        const title = document.createElement('div')
        title.innerHTML = this.data.title || '提示框'
        title.className = this.data.titleClassName || 'dialog-title'
        const defaultStyle = {
          height: '25px',
          lineHeight: '25px',
          padding: '10px 0',
          border: '1px solid #e0e0e0',
          textAlign: 'center'
        }
        const titleStyle = Object.assign({}, defaultStyle, this.data.titleStyle)

        for (let key in titleStyle) {
          title.style[key] = titleStyle[key]
        }

        this.title = title
      }
      createBackgroundBox() {
        const bgBox = document.createElement('div')
        bgBox.className = this.data.bgBoxClassName || 'dialog-background'
        bgBox.id = 'bgBox'
        const defaultBgStyle = {
          position: 'fixed',
          top: '0',
          left: '0',
          width: '100%',
          height: '100vh',
          backgroundColor: 'rgba(0,0,0,0.7)'
        }
        const boxBgStyle = Object.assign({}, defaultBgStyle, this.data.boxBgStyle)
        for (let key in boxBgStyle) {
          bgBox.style[key] = boxBgStyle[key]
        }
        this.bgBox = bgBox
      }
      close() {
        const bgBox = document.getElementById('bgBox')
        document.body.removeChild(bgBox)
      }
      show() {
        this.init()
      }
    }

调用示例

const dialog = new Alert({
  title: '我是一个消息提示框',
  content: '为ID和class取通用且有意义的名字。非必要的情况下，ID和class的名称应尽量简短',
  width: '500px',
  height: '170px',
  confirmClassName: 'confirm',
  confirmText: '好的',
  closeText: '不好',
  fail() {
    console.log(123);
    dialog.close()
  }
})

dialog.show()