介绍
这个包围绕模态对话框界面设计展开,首页直接提供确认弹窗、资料填写弹窗和完成通知弹窗三种常见结构,适合做后台操作确认、活动报名资料补录、下载完成提醒等场景。页面保留遮罩淡入、焦点切换、按钮分层和键盘关闭等核心反馈,打开后就能直接替换文案投入项目。


技术栈
使用 HTML5、CSS3 和原生 JavaScript 编写,没有依赖任何第三方库。样式层主要处理玻璃背景、卡片阴影、按钮状态和弹窗过渡,脚本层只负责切换不同弹窗、控制关闭方式和维护焦点轨迹。
软件架构
index.html 放置预览页、遮罩层和三种模态内容;styles.css 管理首屏布局、窗口卡片、对话框层级和响应式断点;script.js 负责打开、关闭、切换和键盘事件;preview.png 是实际浏览器截图,方便上传到下载站封面位。
安装教程
下载 zip 后解压到任意目录,直接双击 index.html 即可本地运行。若要放入已有项目,把弹窗结构复制到业务页面,再把样式与脚本文件按需拆分即可;如果部署到静态服务器,保留当前目录结构上传即可。
使用说明
点击首页右侧的三个按钮可以分别打开确认、表单和通知弹窗。你可以替换标题、正文、输入项和按钮文案,也可以保留当前脚本逻辑,只改 CSS 变量快速调整配色、圆角和阴影。遮罩点击和 Esc 关闭逻辑默认已经接好。
功能讲解
确认弹窗适合删除、退出、覆盖等二次确认;资料弹窗提供输入框和文本域,适合把表单嵌进弹层;通知弹窗做成紧凑的状态回执,适合导出完成、提交成功等反馈。三个模块共用一套遮罩与关闭逻辑,但在版式和按钮权重上做了明显区分,方便你挑选后单独抽用。
