JS面向对象练习

<button id="delete">删除</button>
<button id="login">登录</button>
<button id="add">新增</button>

.modal {
     width: 300px;
     min-height: 100px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     border-radius: 4px;
     position: fixed;
     z-index: 999;
     left: 50%;
     top: 50%;
     transform: translate3d(-50%, -50%, 0);
     background-color: #fff;
}

.modal .header {
     line-height: 40px;
     padding: 0 10px;
     position: relative;
     font-size: 20px;
}

.modal .header i {
     font-style: normal;
     color: #999;
     position: absolute;
     right: 15px;
     top: -2px;
     cursor: pointer;
}

.modal .body {
     text-align: center;
     padding: 10px;
}

.modal .footer {
     display: flex;
     justify-content: flex-end;
     padding: 10px;
}

.modal .footer a {
     padding: 3px 8px;
     background: #ccc;
     text-decoration: none;
     color: #fff;
     border-radius: 2px;
     margin-right: 10px;
     font-size: 14px;
}

.modal .footer a.submit {
     background-color: #369;
}

function Modal(title = "", message = "") {
        this.modalBox = document.createElement("div");
        this.modalBox.className = "modal";
        // 给modalBox里面再插入两个div标签
        this.modalBox.innerHTML = `<div class="header">${title} <i class="i">x</i></div>
    <div class="body">${message}</div>`;
      }
      //定义open方法，目的是给body最后面加一个标签 this会指向谁？ 要找谁调用的open函数，顺着Modal.prototype找，指向了由Modal创建的对象，在这个对象中，有一个已经创建好的modalBox，于是就追加到了body最后面
      Modal.prototype.open = function () {
        const modal = document.querySelector(".modal");
        // 如果之前已经有modal,点击新的时候，要把旧的删除
        modal && modal.remove()
        // open
        document.body.appendChild(this.modalBox);
        // close
        this.modalBox.querySelector(".i").addEventListener("click", () => {
          this.close();
        });
      };

      Modal.prototype.close = function () {
        this.modalBox.remove();
      };

      //删除按钮
      document.querySelector("#delete").addEventListener("click", function () {
        const dele = new Modal("友情提示", "您没有删除权限操作");
        dele.open();
      });
      //登录按钮
      document.querySelector("#login").addEventListener("click", function () {
        const login = new Modal("温馨提示", "您还没有登录");
        login.open();
      });
      //新增按钮
      document.querySelector("#add").addEventListener("click", function () {
        const login = new Modal("温馨提示", "您没有增加权限");
        login.open();
      });