纯div+css+js弹出窗
目的：实现弹出窗、仅关闭弹窗之后才能操作。自适应宽度与高度、当文本内容太多时、添加滚动条效果。
效果图
源码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Popup Box</title><style>.popup {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 9999;}.popup-content {background-color: #fff;width: 800px;height: 800px;margin: 100px auto;padding: 10px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;cursor: pointer;}/* 全局设置滚动条样式 */*::-webkit-scrollbar {width: 10px;background-color: #f5f5f5;}*::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 5px;}</style></head><body><button id="popupButton" onclick="openPopup()">Open Popup</button><div id="popup" class="popup"><div class="popup-content"><span class="close" onclick="closePopup()">×</span><h2>This is a Popup</h2> <div id="popup-div" class="popup-div"></div></div></div><script>const popup = document.getElementById("popup");const popupDiv = document.getElementById("popup-div");function openPopup() {popup.style.display = "block";document.getElementById("popup-div").innerHTML=
'<p><span class="text-huge">第一章1</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章2</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章3</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章4</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章5</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章6</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章7</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章8</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章9</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章10</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章11</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章12</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p> </p>'+
'<p><span class="text-huge">第一章13</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章13</li></ul><p> </p>'+
'<p><span class="text-huge">第一章14</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章14</li></ul><p> </p>'+
'<p><span class="text-huge">第一章15</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章15</li></ul><p> </p>'+
'<p><span class="text-huge">第一章16</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章16</li></ul><p> </p>'+
'<p><span class="text-huge">第一章17</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章17</li></ul><p> </p>'+
'<p><span class="text-huge">第一章18</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章18</li></ul><p> </p>'+
'<p><span class="text-huge">第一章19</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章19</li></ul><p> </p>';popupDiv.style.cssText = "width:800px;height:500px;background-color:rgba(0, 0, 0, 0.5); overflow:scroll;";}function closePopup() {popup.style.display = "none";popupDiv.innerHTML='';popupDiv.style.cssText = "width:0px;height:0px;";}</script></body>
</html>
核心代码
1.父容器设置宽高（popup-content） 子容器（popup-div）设置滚动条支持
2.由于div内容是通过js动态设置、所以样式也需要动态设置
复制以上代码 HTML验证
相关文章：
纯div+css+js弹出窗
目的：实现弹出窗、仅关闭弹窗之后才能操作。自适应宽度与高度、当文本内容太多时、添加滚动条效果。 效果图 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport"…...
一篇文章学会HTML
目录 页面结构 网页基本标签 图像标签 超链接标签 文本链接 图像链接 锚链接 功能链接 列表 有序列表 无序列表 自定义列表 表格 跨列/跨行 表头 媒体元素 视频 音频 网站的嵌套 表单 表单元素 文本框 单选框 多选框 按钮 下拉框 文本域和文件域 表…...
QGIS二次开发（插件开发）
实习二 QGIS插件开发 2.1 任务要求 a）用C语言编写qgis插件，实现带有x/y坐标的文本文件的地图显示。 用文件流fstream操作文本文件，读取其中的坐标数据。基于QgsPlugin相关类派生出一个插件，并加到插件工厂中。基于QgsVectorLaye…...
Web防火墙和下一代防火墙的区别
介绍 客户经常询问“当我已经拥有下一代防火墙（NGFW）时，为什么需要Web应用程序防火墙（WAF）？”。本博文的目的是解释两种解决方案之间的区别，重点关注Web应用程序防火墙可以提供的附加值。 什么…...
Linux：alias别名永久有效
一、背景 日常使用bash时候，有些常用的命令参数的组合命令太长，很难记，此时可以利用Linux提供的alias命令生成命令的别名（命令的隐射），但是我们会发现，当退出了终端后重新登录就失效了ÿ…...
【递归与回溯深度解析：经典题解精讲（中篇）】—— LeetCode
文章目录 组合目标和组合总和字母大小写全排序优美的排列N皇后 组合 思路：回溯算法 问题要求从 1 到 n 中选出 k 个数的所有组合。 使用回溯算法递归构造解。 每次递归时，记录当前的组合路径，当组合长度达到 k 时，将其加入结果集…...
01.HTTPS的实现原理-HTTPS的概念
01.HTTPS的实现原理-HTTPS的概念 简介1. HTTPS的概念和安全性2. HTTPS的实现原理3. HTTPS和HTTP的区别4. OSI七层协议模型5. SSL和TLS的区别 简介 该系列文章主要讲述了HTTPS协议与HTTP协议的区别，以及HTTPS如何实现安全传输。内容分为三部分：HTTPS的实…...
一文详解MacOS+CLion——构建libtorch机器学习开发环境
对于希望在本地环境中进行深度学习开发的开发者来说，配置合适的工具链是至关重要的一步。本文旨在帮助您在 macOS 操作系统上，利用 CLion IDE 和 PyTorch 的 C依赖库——libtorch，快速搭建起一个高效的开发环境。这里我们将一步步地讲解如何下…...
【LeetCode 面试经典150题】详细题解之哈希表篇
【LeetCode 面试经典150题】详细题解之哈希表篇 1 哈希表的基础1.1 基础概念及实现1.2.1 哈希表的工作原理1.2.2 705.设计哈希集合1.2.3 706.设计哈希映射 1.2 HashMap相关1.2.1 基本操作1.2.2 遍历 1.3 Hashtable1.4 LinkedHashMap1.5 HashSet**1.5.1基本特性**1.5.2 基本方法…...
linux socket编程之udp_dict_serve服务端--引入配置文件
注意：本篇博客只是对上一篇博客功能的增加 1.创建配置文件(翻译) Dict.txt apple: 苹果 banana: 香蕉 cat: 猫 dog: 狗 book: 书 pen: 笔 happy: 快乐的 sad: 悲伤的 run: 跑 jump: 跳 teacher: 老师 student: 学生 car: 汽车 bus: 公交车 love: 爱 hate: 恨 hell…...
selenium学习笔记（二）
文章目录 前言设计模式POMPOM概念POM优势POM设计原则POM的实现 selenium的常用操作处理动态元素截图操作勾选复选框多层框架/窗口定位操作下拉框上传文件操作处理弹窗切换窗口拖拽操作 如何处理浏览器驱动更新导致的问题selenium与网站监控监听网页内容变化监控网络请求 seleni…...
宏集eX710物联网工控屏在石油开采机械中的应用与优势
案例概况 客户：天津某石油机械公司 应用产品：宏集eX710物联网工控屏 应用场景：钻井平台设备控制系统 一、应用背景 石油开采和生产过程复杂，涵盖钻井平台、采油设备、压缩机、分离器、管道输送系统等多种机械设备。这些设备通…...
linux——vi命令常用操作
一、vi模式 vi一般分为三种模式，分别是命令行模式、插入模式、末行模式 1.命令模式：控制屏幕光标的移动，按 ：进入末行模式，按 i（其他插入命令也可） 进入插入模式； 2.插入模式&…...
vscode添加全局宏定义
利用vscode编辑代码时，设置了禁用非活动区域着色后，在一些编译脚本中配置的宏又识别不了 遇到#ifdef包住的代码就会变暗色，想查看代码不是很方便。如下图： 一 解决： 在vscode中添加全局宏定义。 二 步骤：…...
重装荣耀X14笔记本电脑踩坑记
这几天趁着有国补搞了台荣耀 X14笔记本电脑。到手后第一件事情对我来说当然是要重装成Windows 11 LTSC版。所以按以往的经验做了个USB启动安装盘，但发现上电后按F12能进入启动设备选择，可是USB分类下没有任何设备。重启按F2进入设置界面，关闭…...
Android `android.graphics.drawable` 包深度解析：架构与设计模式
Android android.graphics.drawable 包深度解析：架构与设计模式 目录 引言Drawable 概述Drawable 的架构 Drawable 类层次结构Drawable 的核心方法Drawable 的设计模式 装饰者模式工厂模式状态模式常用 Drawable 子类解析 BitmapDrawableShapeDrawableLayerDrawableStateList…...
Kotlin语言的软件工程
Kotlin语言的软件工程 引言 在现代软件开发中，选择合适的编程语言是项目成功的关键之一。随着移动互联网的迅猛发展，以及大数据和人工智能等新兴技术的崛起，Kotlin语言凭借其简洁、高效和安全等特性，迅速崛起为备受欢迎的编程语…...
面试经典 150 题——数组/字符串（一）
文章目录 1、合并两个有序数组1.1 题目链接1.2 题目描述1.3 解题代码1.4 解题思路 2、移除元素2.1 题目链接2.2 题目描述2.3 解题代码2.4 解题思路 3、删除有序数组中的重复项3.1 题目链接3.2 题目描述3.3 解题代码3.4 解题思路 4、删除有序数组中的重复项 II4.1 题目链接4.2 题…...
使用亚马逊针对 PyTorch 和 MinIO 的 S3 连接器实现可迭代式数据集
2023 年 11 月，Amazon 宣布推出适用于 PyTorch 的 S3 连接器。适用于 PyTorch 的 Amazon S3 连接器提供了专为 S3 对象存储构建的 PyTorch 数据集基元（数据集和数据加载器）的实现。它支持用于随机数据访问模式的地图样式数据集和用于流式处理…...
TestMAX/DFT Compiler：时序单元的类型、连接顺序和后DFT优化
相关阅读 TestMAX/DFT Compilerhttps://blog.csdn.net/weixin_45791458/category_12865937.html?spm1001.2014.3001.5482 时序单元的状态 未映射的时序单元(Unmapped Sequential Cell) 在Design Compiler读取了一个RTL设计后，Design Compiler内置的HDL Compiler工…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
家政维修平台实战20：权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
Spring AI 入门：Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
html-＜abbr＞ 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。 示例&#x…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版，莫兰迪调色板清新简约工作汇报PPT模版，莫兰迪时尚风极简设计PPT模版，大学生毕业论文答辩PPT模版，莫兰迪配色总结计划简约商务通用PPT模版，莫兰迪商务汇报PPT模版，…...
多模态图像修复系统：基于深度学习的图片修复实现
多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...