(css)原生html实现遮罩层弹窗

news/2024/7/24 15:14:43/

(css)原生html实现遮罩层弹窗


效果:

在这里插入图片描述


html

<div class="overlay"><div class="content"><!-- 需要遮罩的内容 --> <el-table :data="tableData" size="mini" class="table-class" border stripe><el-table-column type="index" label="序号" width="50" align="center" /></el-table-column>...</el-table></div>
</div>

css样式:

.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5); /* 设置背景颜色为半透明黑色 */z-index: 9999; /* 设置 z-index 值确保遮罩层位于其他元素之上 */display: flex;justify-content: center;
}.content {position: relative;z-index: 10000; /* 设置 z-index 值确保内容层位于遮罩层之上 */background-color: #01bdb2;width: 50%;height: 30%;margin-top: 10%;
}

http://www.ppmy.cn/news/972873.html

相关文章

数据可视化——绘制带有时间线的柱状图

文章目录 前言如何绘制柱状图添加时间线根据提供的数据绘制动态柱状图读取并删除无用数据将数据转换为字典创建柱状图并添加到时间线中配置选项并生成带有数据的折线图 前言 我们已经学习了使用 pyecharts 包中的模块和相应的方法绘制了折线图和地图&#xff0c;那么今天我将为…

UE特效案例 —— 骷髅爆点

一&#xff0c;环境配置 创建默认地形Landscape&#xff0c;如给地形上材质需确定比例&#xff1b;添加环境主光源DirectionalLight&#xff0c;设置相应的强度和颜色&#xff1b;添加天光反射SkyLight&#xff0c;用于天空反射&#xff1b;添加指数级高度雾ExponentialHeightF…

wxchart 小程序 线条图不显示y轴的网格线 (分割线)

如下图&#xff1a;项目需求不显示包括x轴的6条灰色分割线。 分析&#xff1a; 看了一下源码已经写死了是5条分割线&#xff0c;加一条x轴刻度线。没给公开配置方法。 解决方案&#xff1a; 既然没有配置项目&#xff0c;可以转变思路&#xff0c;把这些线条配置成白色&…

godot引擎c++源码深度解析系列一

许久没有使用c开发过项目了&#xff0c;如果按照此时单位的入职要求&#xff0c;必须拥有项目经验的话&#xff0c;那我就得回到十多年前&#xff0c;大学的时代&#xff0c;哪个时候真好&#xff0c;电脑没有这么普及&#xff0c;手机没有这么智能&#xff0c;网络没有这么发达…

去括号问题(C++处理)

继http://t.csdn.cn/kIcUT后的文章 题目描述 当老师不容易&#xff0c;尤其是当小学的老师更难:现在的小朋友做作业喜欢滥用括号。 虽然不影响计算结果&#xff0c;但不够美观&#xff0c;容易出错&#xff0c;而且可读性差。但又不能一棒子打死&#xff0c;也许他们就是将来的…

使用ChatGPT增强测试技能:让你的生产力提升到另一个层次

hatGPT拥有源源不断的机遇&#xff0c;能够帮助提升测试人员的测试能力, 从复杂的需求评审设计到运用自动化技巧的用例设计&#xff0c;再到web界面和接口测试的边界值检查等等。 需求评审 需求评审&#xff08;Requirements review&#xff09;是测试过程中必不可少的一环。它…

django groupby踩坑

django groupby踩坑 前言坑 ~~参考~~ 前言 django的orm作为简单查询 使用简直是太爽了&#xff0c;所见即所得,但是groupby时候缺有一些坑点 坑 from django.db.models import Count from w.models import www # 在不加order by的时候 会默认按照id分组 print(TaskPort.obje…

RocketMQ教程-(4)-领域模型概述

Apache RocketMQ 是一款典型的分布式架构下的中间件产品&#xff0c;使用异步通信方式和发布订阅的消息传输模型。通信方式和传输模型的具体说明&#xff0c;请参见下文通信方式介绍和消息传输模型介绍。 Apache RocketMQ 产品具备异步通信的优势&#xff0c;系统拓扑简单、上下…

java List使用Map泛型和使用自定义泛型

1 Map 泛型 // 创建一个 List&#xff0c;用于存储多个 Map List<Map<String, Object>> dataList new ArrayList<>(); 1.1打印出来 [{date2023-07-21, title公告}, {date2023-07-21, title公告}, {date2023-07-21, title公告}, {date2023-07-21, title公…

绘出「星辰大海」:华为云Astro轻应用新手指南-第一章

第1章 旅程的开端 发现Astro轻应用地图 第1站&#xff1a;创建账户 首先&#xff0c;你需要在华为云Astro官网注册专属账号。若已有华为账户&#xff0c;可直接登录。 在官网点击「立即使用」&#xff0c;即可跳转至「登录界面」 在「登录界面」点击「注册」&#xff0c;注册…

2023中国费控报销领域最具商业合作价值企业盘点

‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 在企业的日常运营中&#xff0c;控制费用是非常重要的一项任务。一个高效且经济稳健的企业&#xff0c;必然需要严格掌控各项支出。其中&#xff0c;报销费控更是企业控制费用的重要手段。 根据灼识咨询发布的白皮书&#x…

【电商AI工具二期】智能AI赋能电商新纪元:22个必备AI电商工具助你抢占市场爆款!

注&#xff1a; 本文可自由转载 0. 未来百科 未来百科(https://nav.6aiq.com)&#xff0c;是一个知名的AI产品导航网站 —— 为发现全球优质AI工具而生 。目前已 聚集全球3000优质AI工具产品 &#xff0c;旨在帮助用户发现全球最好的AI工具&#xff0c;同时为研发AI垂直应用的…

Python霸占“8座大山”,你的领域出现了吗?

Python&#xff0c;这一通用编程语言&#xff0c;已具有广泛的应用领域。其学习曲线非常平滑&#xff0c;可谓编程入门同学的首选&#xff01;那么&#xff0c;让我们来探索一下 Python 在主要热门应用领域中的表现吧&#xff01; 1. 数据科学和机器学习 Python 在数据科学和机…

报告展示了网络犯罪分子如何使用生成人工智能

本文首发公众号网络研究院&#xff0c;微信关注获取更多。 SlashNext 本周发布了一份报告&#xff0c;详细介绍了网络犯罪分子如何利用名为 WormGPT 的生成人工智能 (AI) 功能&#xff0c;大规模发起复杂的网络钓鱼和商业电子邮件泄露(BEC) 攻击。 WormGPT 是一个基于 GPTJ …

【GPT-4】HuggingFace万字访谈:OpenAI不足为惧,每个公司都会有自己的GPT-4

日前,Hugging Face 创始人 Clem Delangue 参与了一场访谈,过程中谈到了以下几个关键问题: Hugging Face 的创始故事 大模型 AI 未来会如何迭代? 大公司闭源会对开源社区产生影响吗? 驱动大模型进步的核心是什么? 通用大模型和专用小模型有优劣之分吗? 现阶段如何进行更具…

【Python】实现公章自动化生成以及自动盖章效果

前言&#xff1a;因为工作中需要经常自己盖章到模板图片上然后去打印签名&#xff0c;每次基本都是一个重复循环的过程&#xff0c;遂探索是否可以变成自动化脚本供我提高工作效率&#xff0c;同时在这次编码中我也使用chatgpt帮我实现一些代码&#xff0c;整个功能开发的过程非…

前端工程化第二章:webpack5基础(中)

文章目录 1. 处理css资源&#xff08;css文件拆分 mini-css-extract-plugin&#xff09;1.1. package.json1.2. webpack.config.js 2. 处理预编译器&#xff08;less/scss&#xff09;2.1. src/index.js2.2. src/index.less2.3. src/index.scss2.4. webpack.config.js 3. 适配&…

Kafka-partition和消费者的关系

Kafka-partition 目录概述需求&#xff1a; 设计思路实现思路分析1.Kafka-partition2.消费者数量小于分区数量3. 拓展实现 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a…

最新IT类offer档次排名

上一篇&#xff1a;阿里巴巴裁员19576人&#xff01; 首先给大家看一份网上流传的《IT类offer档次排名》 第一档&#xff1a;股份制银行总行&#xff0c;证券公司&#xff0c;基金公司IT部门&#xff08;民生&#xff0c;中信&#xff0c;兴业&#xff0c;浦发&#xff0c;南方…

与ChatGPT 技术对话 42 天后,30多岁男子过于焦虑自杀身亡...

点击“开发者技术前线”&#xff0c;选择“星标” 让一部分开发者看到未来 来自&#xff1a;极目新闻 最近ChatGPT的飞速发展引起了世界范围的广泛关注&#xff0c;有人兴奋&#xff0c;也有人担忧。 据比利时媒体LAvenir3月28日报道&#xff0c;一名热衷于环境问题的比利时男子…