面向对象综合案例

使用面向对象方式，编写模态框。
模态框Modal业务
打开方法open
关闭方法close
html
<script>
  // 1.  模态框的构造函数
  function Modal(title = '', message = '') {
    // 公共的属性部分
    this.title = title
    this.message = message
    // 因为盒子是公共的
    // 1. 创建 一定不要忘了加 this 
    this.modalBox = document.createElement('div')
    // 2. 添加类名
    this.modalBox.className = 'modal'
    // 3. 填充内容 更换数据
    this.modalBox.innerHTML = `
      <div class="header">${this.title} <i>x</i></div>
      <div class="body">${this.message}</div>
    `
    // console.log(this.modalBox)
  }
  // 2. 打开方法 挂载 到 模态框的构造函数原型身上
  Modal.prototype.open = function () {
    if (!document.querySelector('.modal')) {
      // 把刚才创建的盒子 modalBox  渲染到 页面中  父元素.appendChild(子元素)
      document.body.appendChild(this.modalBox)
      // 获取 x  调用关闭方法
      this.modalBox.querySelector('i').addEventListener('click', () => {
        // 箭头函数没有this 上一级作用域的this
        // 这个this 指向 实例对象
        this.close()
      })
    }
  }
  // 3. 关闭方法 挂载 到 模态框的构造函数原型身上
  Modal.prototype.close = function () {
    document.body.removeChild(this.modalBox)
  }

  // 4. 按钮点击
  document.querySelector('#delete').addEventListener('click', () => {
    const m = new Modal('温馨提示', '您没有权限删除')
    // 调用 打开方法
    m.open()
  })

  // 5. 按钮点击
  document.querySelector('#login').addEventListener('click', () => {
    const m = new Modal('友情提示', '您还么有注册账号')
    // 调用 打开方法
    m.open()
  })

</script>
面向对象综合案例 ​

面向对象综合案例
