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

news2024/11/17 19:34:50

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

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

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.coloradmin.cn/o/1891220.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

threejs 微信小程序原生版本的使用 obj模型的加载

直接上代码&#xff0c; <canvas class"webgl" type"webgl" id"gl" bindtouchstart"onTX" bindtouchend"onTX" bindtouchmove"onTX" style"width:100vw;height:90vh"></canvas> const co…

手写starter写核心

文章目录 使用cn.smart 不能使用com 避免在yml配置的时候 开启或者 写万能接口实现调整日志级别写了core核心 但是没有引入其他功能组件,就是注解可以使用但是功能没有增,所以core的作用就是写入注解从新写starter 第一步提取注解 写到核心包里面,看其他包 新建模块 使用cn.s…

5分钟教你部署MySQL8.0环境

此方法基于Windows操作系统&#xff01; 一、在MySQL官网单击downloads&#xff08;下载&#xff09;MySQLhttps://www.mysql.com/cn/ 选择在Windows操作系统下载 二、选择合适的版本 推荐下载第二种&#xff0c;安装时离线安装即可 三、安装MySQL8.0 1、找到MySQL下载完成…

STM32——GPIO(点亮LED)

一、GPIO是什么&#xff1f; 1、GPI/O(general porpose intput output):通用输入输出端口的简称&#xff0c;通俗地说&#xff0c;就是我们所学的51单片机的IO口&#xff0c;即P0_0等。但要注意&#xff1a;并非所有的引脚都是GPIO 输出模式下可控制端口输出高低电平&#xf…

zed_ros2_wapper colcon 报错

问题一&#xff1a; CMake Error at CMakeLists.txt:129 (find_package): By not providing “Findnmea_msgs.cmake” in CMAKE_MODULE_PATH this project has asked CMake to find a package configuration file provided by “nmea_msgs”, but CMake did not find one. Co…

二刷力扣——DP算法(子序列问题)

300. 最长递增子序列 定义是以本元素结尾&#xff0c;所以公式初始化都好弄。但是太慢 class Solution {public int lengthOfLIS(int[] nums) {int nnums.length;int[] dp new int[n];//以自己结尾的最长递增子序列dp[0]1;int maxzi1;for(int i1;i<n;i){dp[i]1;for(int j…

开源自动化热键映射工具autohotkey十大用法及精选脚本

AutoHotkey&#xff08;AHK&#xff09;是一款功能强大的热键脚本语言工具&#xff0c;它允许用户通过编写脚本来自动化键盘、鼠标等设备的操作&#xff0c;从而极大地提高工作效率。以下是AutoHotkey的十大经典用法&#xff0c;这些用法不仅解放了用户的双手&#xff0c;还展示…

(十二)纹理和采样

纹理 在绘制三角形的过程中&#xff0c;将图片贴到三角形上进行显示的过程&#xff0c;就是纹理贴图的过程 uv坐标 如果如果图片尺寸和实际贴图尺寸不一致&#xff0c;就会导致像素不够用了的问题 纹理与采样 纹理对象(Texture)&#xff1a;在GPU端&#xff0c;用来以一…

RPA 第一课

RPA 是 Robotic Process Automation 的简称&#xff0c;意思是「机器人流程自动化」。 顾名思义&#xff0c;它是一种以机器人&#xff08;软件&#xff09;来替代人&#xff0c;实现重复工作自动化的工具。 首先要说一句&#xff0c;RPA 不是 ChatGPT 出来之后的产物&#x…

新火种AI|国产大模型展开决战,是资本游戏还是技术革命?

作者&#xff1a;一号 编辑&#xff1a;美美 资本角逐与技术革新&#xff0c;国产大模型的双线战场已然开启。 随着人工智能技术的不断进步&#xff0c;国产大模型正迅速成为行业关注的焦点。在这个由数据驱动的时代&#xff0c;资本的注入和技术创新的加速&#xff0c;让国…

基于Teager-Kaiser能量算子的肌电信号降噪方法(MATLAB)

Teager-Kaiser能量算子是一种非线性算子&#xff0c;它能有效提取信号的瞬时能量&#xff0c;对信号瞬时变化具有良好的时间分辨率。Teager-Kaiser能量算子只需信号三个采样点&#xff0c;即可快速跟踪信号的幅值和角频率变化&#xff0c;计算实现简单、运算量小。 clc clear a…

excel表格如何换行,这几个操作方法要收藏好

Excel表格作为一款强大的数据处理工具&#xff0c;在日常工作和生活中被广泛应用。当需要在单元格内显示较长的文本内容或使数据更加清晰易读时&#xff0c;我们需要掌握一些换行技巧。下面将介绍几种常用的Excel换行方法&#xff1a; 一、使用快捷键换行 1、首先&#xff0c;…

SpringBoot+Vue集成AOP系统日志

新建logs表 添加aop依赖 <!-- aop依赖--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency> 新建获取ip地址工具类 import javax.servlet.http.H…

java常用类(3)

目录 一. 正则表达式 二. Math类 三. Random类 四. Date类 五. Calendar类 六. SimpDateFormate类 七. BigInteger类 八. BigDecimal类 一. 正则表达式 正则表达式(Regular Expression)就是用一些特殊的符号去匹配一个字符串是否符合规则,利用String类中的matches()方…

离线查询+线段树,CF522D - Closest Equals

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 522D - Closest Equals 二、解题报告 1、思路分析 考虑查询区间已经给出&#xff0c;我们可以离线查询 对于这类区间离线查询的问题我们通常可以通过左端点排序&#xff0c;然后遍历询问同时维护左区间信息…

用机器改变人类方向

1800 世纪初&#xff0c;美国迎来了工业革命&#xff0c;这是一个由技术进步推动的变革时代。新机器和制造技术的引入重塑了经济格局&#xff0c;提高了生产效率&#xff0c;同时减少了某些领域对手工劳动的需求。因此&#xff0c;这种转变导致了失业。 如今&#xff0c;我们看…

【漏洞复现】朗新智能人力资源系统(HCM) GetFunc_code.asmx接口处存在SQL注入漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

产线AGV和仓储AGV到底有什么不同?

agv AGV小车虽然体积小巧&#xff0c;但这并不影响它强大的负重能力&#xff0c;它不需要人工去操作驾驶&#xff0c;能够实现无人搬运车的功能&#xff0c;而且随着AGV小车的发展&#xff0c;已经从最传统普遍的磁导航升级为惯性导引和激光导引AGV小车了&#xff0c;从需要在企…

2. Python+Playwright playwright的API

Playwright支持同步和异步两种API&#xff0c;使用异步API需要导入asyncio库&#xff0c;它是一个可以用来实现Python协程的库&#xff0c;更详细介绍可参考Python协程 。我们可以根据自己的偏好选择适合的模式。 同步与异步模式原理 同步操作方式&#xff1a;在代码执行时&am…

【目标检测】DINO

一、引言 论文&#xff1a; DINO: DETR with Improved DeNoising Anchor Boxes for End-to-End Object Detection 作者&#xff1a; IDEA 代码&#xff1a; DINO 注意&#xff1a; 该算法是在Deformable DETR、DAB-DETR、DN-DETR基础上的改进&#xff0c;在学习该算法前&#…