如何用简单的html，css，js写出一个带有背景层的删除弹出框

虽然每次项目都是主要写后端，但是有时候前端的样式太丑了，也有点看不下去。弹出框是项目中用的比较多的，比如删除，修改或者添加什么的，都需要一个弹出框。

所以这里简单记录一下，应该如何实现。实现效果如下图：

html结构

这里我把弹出框的盒子拆分为上下结构的三块，第一块放弹出框标题和x,第二块放主体内容，第三块为底部放确定和取消按钮。

代码如下：

html 复制代码

 <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就可以

html 复制代码

 <!-- 背景层 -->
    <div class="overlay" id="overlay"></div>

css样式

背景层的css样式：主要要让它的position属性为fixed。表示元素相对于浏览器窗口进行定位，而不是相对于包含它的父元素。当浏览器窗口滚动时，使用position: fixed;的元素会保持在相对于窗口固定的位置，不会随着页面滚动而移动。

然后把它铺满整个窗口，并设置背景颜色为灰色透明，就可以有一个透明背景层的效果。要实现铺满则需要让它的高度和宽度都和整个窗口一样高。

css 复制代码

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

而弹出框的样式，也是需要这种固定的位置，显示在窗口的正中间，不会随页面滚动而滚动。

css 复制代码

.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才可以这样获取元素）

javascript 复制代码

 function show() {
        $("#del-modal").addClass("show");
        $("#overlay").addClass("show");
    }

给x和取消按钮绑定点击事件，点击后移除弹出框和背景层为show的class.

javascript 复制代码

   function toclose() {
        $("#del-modal").removeClass("show");
        $("#overlay").removeClass("show");
    }

整体代码

html:

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代码：

html 复制代码

* {
    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;
}