用js来实现自定义弹框
前言：个人作业上传（大家可参考但不可转载），实现将弹框的样式统一封装在一个对象中方便后续的修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 打开弹窗按钮 -->
<button id="myBtn">打开弹窗</button>
<!-- 弹窗 -->
<div id="myModal" class="modal">
<!-- 弹窗内容 -->
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer">
<span id="showConfirmBtn">确认</span>
<span id="showConcelmBtn">取消</span>
</div>
</div>
</div>
</body>
<script>
window.onload = function () {
const obj = {
titile: 通知,
content: 这是内容文本,
showConfirmBtn: true,
showCancelBtn: true,
}
var modal = document.getElementById(myModal); // 获取弹窗
var btn = document.getElementById("myBtn");// 打开弹窗的按钮对象
var firm = document.getElementById("showConfirmBtn");//确认
var cel = document.getElementById("showConcelmBtn");//取消
var close = document.querySelector(".modal-footer");// 获取 元素，用于关闭弹窗
function init() {
const b = [];
for (const key in obj) {
b.push(obj[key]);
}
document.querySelector(".modal-header").innerHTML = `<h1 >${b[0]}</h1>`;
document.querySelector(".modal-body").innerHTML = `<p >${b[1]}</p>`;
b[2] === true ?"":firm.style.display = "none";
b[3] === true ?"":cel.style.display = "none";
}
btn.addEventListener("click", function (ev) {
modal.style.display = "block";
close.addEventListener("click", function (ev) {
var target = ev.target;
if (target.id === "showConcelmBtn") {
closeall("取消");
}
if(target.id === "showConfirmBtn"){
closeall("确定");
}
})
})
function closeall(btn){
modal.style.display = "none";
setTimeout(function(){ alert("你点的是"+btn+"按钮"); },);
}
init();
}
</script>
<style>
/* 弹窗 (background) */
.modal {
display: none;
/* 默认隐藏 */
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
/* 弹窗内容 */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
border-radius: 20px;
width: 35%;
height: 30%;
box-shadow: 0 4px 8px 0 black, 0 6px 20px 0 black;
animation: animatetop 0.4s
}
/* 添加动画 */
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#showConfirmBtn:hover,
#showConcelmBtn:hover {
color: #5b88b4;
text-decoration: none;
cursor: pointer;
}
.modal-header {
color: #5b88b4;
position: absolute;
top:-5px;left: 5%;
}
.modal-body {
position: absolute;
top: 40%;
left: 10%;
}
.modal-footer {
text-align: right;
color: #409eff;
position: absolute;
top: 83%;
right: 5%;
}
</style>
</html>