<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";
this.modalBox.innerHTML = `<div class="header">${
title} <i class="i">x</i></div> <div class="body">${
message}</div>`;
}
Modal.prototype.open = function () {
const modal = document.querySelector(".modal");
modal && modal.remove()
document.body.appendChild(this.modalBox);
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();
});