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

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/39767.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！