01
内容 Modal
测试标题、正文、按钮、长内容滚动与关闭逻辑。
CSS DEVELOPMENT LAB · 11
Modal / Lightbox
登录框、询盘表单、产品视频、图片大图都经常需要覆盖在页面最上层。
本实验优先使用原生 <dialog>，重点研究 Top Layer、
::backdrop、尺寸控制、内部滚动和图片 Lightbox。
CORE DEMO
一个 Dialog，两种常见用途
第一个是标准信息 Modal，第二个是图片 Lightbox。
JavaScript 只负责调用 showModal() 与 close()，
布局、遮罩、尺寸和响应式全部交给 CSS。
Modal
适合表单、说明、登录、确认操作
Lightbox
适合图片、作品、产品大图、视频
02
图片 Lightbox
点击缩略图后，在原生 Dialog 中查看更大的同一张图片。
WHY DIALOG
先理解原生能力，再决定是否自定义
原生 Modal Dialog 会进入浏览器 Top Layer，不需要自己与 Header、
Drawer、Tooltip 一层层比拼 z-index。
传统自定义 Modal
fixed + z-index + overlay + focus 管理
原生 dialog
showModal() + ::backdrop + Top Layer
COMMON USE CASES
高频应用场景
询盘表单
B2B 产品页快速提交咨询。
图片大图
Gallery、案例、产品细节查看。
视频播放
点击封面后在浮层中播放。
确认操作
删除、退出、提交等重要操作。