虽然每次项目都是主要写后端，但是有时候前端的样式太丑了，也有点看不下去。弹出框是项目中用的比较多的，比如删除，修改或者添加什么的，都需要一个弹出框。
所以这里简单记录一下，应该如何实现。实现效果如下图：
html结构
这里我把弹出框的盒子拆分为上下结构的三块，第一块放弹出框标题和x,第二块放主体内容，第三块为底部放确定和取消按钮。
代码如下：
<div class="modal" id="del-modal">
<div class="head">
<span class="title">删除框</span>
<span class="ico" onclick="toclose()">x</span>
</div>
<hr>
<div class="content">
删除不可恢复，是否确定删除？
</div>
<div class="foot">
<button class="normal-bnt" >删除</button>
<button class="cancel-bnt" onclick="toclose()">取消</button>
</div>
</div>表示背景层的div元素随便放在哪里都可以，我们主要设置它的css就可以
<!-- 背景层 -->
<div class="overlay" id="overlay"></div>css样式
背景层的css样式：主要要让它的position属性为fixed。表示元素相对于浏览器窗口进行定位，而不是相对于包含它的父元素。当浏览器窗口滚动时，使用position: fixed;的元素会保持在相对于窗口固定的位置，不会随着页面滚动而移动。
然后把它铺满整个窗口，并设置背景颜色为灰色透明，就可以有一个透明背景层的效果。要实现铺满则需要让它的高度和宽度都和整个窗口一样高。
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}而弹出框的样式，也是需要这种固定的位置，显示在窗口的正中间，不会随页面滚动而滚动。
.modal {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: white;
z-index: 1001;
}position: fixed; left: 50%;top: 50%;这三项设置可以让弹出框的起始位置变成在距离窗口左边50%和距上50%的位置，但想让弹出框居中，还需要考虑弹出框自己的长和宽，加上transform: translate(-50%,-50%);就可以让弹出框本身像左移动自己宽度一半的距离，像上移动自己高度一半的距离。实现完全居中。
z-index属性：用于设置元素的堆叠顺序（z轴顺序）。可以理解为元素在z轴上的位置，决定了元素在其他元素之上还是之下。我们把弹出框的的z-index设置得比背景层大，就能让弹出框显示在背景层之上。
以上叙述的均为重要的css实现，其他元素的css样式可以根据自己的需求自定义。
js
show方法显示弹出框和背景层，给某个按钮绑定点击事件触发show方法，show方法会给弹出框和背景层加一个class为show的属性。(注意，这里引入了jquery.min.js才可以这样获取元素）
function show() {
$("#del-modal").addClass("show");
$("#overlay").addClass("show");
}给x和取消按钮绑定点击事件，点击后移除弹出框和背景层为show的class.
function toclose() {
$("#del-modal").removeClass("show");
$("#overlay").removeClass("show");
}整体代码
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="弹出框.css">
<body>
<div style="left: 10%; top: 10%; position:fixed">
<button onclick="show()">点我弹出删除框</button>
</div>
<div class="modal" id="del-modal">
<div class="head">
<span class="title">删除框</span>
<span class="ico" onclick="toclose()">x</span>
</div>
<hr>
<div class="content">
删除不可恢复，是否确定删除？
</div>
<div class="foot">
<button class="normal-bnt" >删除</button>
<button class="cancel-bnt" onclick="toclose()">取消</button>
</div>
</div>
<!-- 背景层 -->
<div class="overlay" id="overlay"></div>
</body>
</html>
<script src="../jquery.min.js"></script>
<script>
function show() {
$("#del-modal").addClass("show");
$("#overlay").addClass("show");
}
function toclose() {
$("#del-modal").removeClass("show");
$("#overlay").removeClass("show");
}
</script>css代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置整体页面高度 */
html, body {
height: 100%;
}
.modal {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: white;
z-index: 1001;
}
.head {
padding:10px;
height: 40px;
width: 250px;
}
.title {
font-size: 16px;
}
.ico {
position: absolute;
right: 15px;
}
.ico:hover {
color: #767575;
cursor: pointer;
}
.content {
text-align: center;
margin: 10px;
font-size: 14px;
height: 40px;
line-height: 40px;
}
.foot {
text-align: right;
padding-right: 15px;
margin: 5px 0;
}
.foot button {
display: inline-block;
height: 30px;
width: 60px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.normal-bnt {
background-color:rgb(64,158,255) ;
color: white;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.show {
display: block;
}
