用 position: fixed 实现弹窗居中（top: 50% + left: 50% + transform: translate(-50%, -50%)），遮罩层设 fixed + inset: 0 + z-index: 1000，点击遮罩关闭需判断 event.target，esc 键关闭并管理焦点，内容区用 max-height + overflow-y: auto 自适应。
用 div 实现 HTML 弹窗，本质是控制一个带遮罩层的 div 显示/隐藏，并阻止底层滚动、聚焦穿透和键盘逃逸。纯 CSS + 少量 JS 就能搞定，不需要框架。
怎么让弹窗居中且不随滚动偏移
关键不是用 position: absolute，而是 position: fixed —— 它锚定视口，滚动时不会跑。再配合 top: 50% + left: 50% + transform: translate(-50%, -50%) 精确居中。
常见错误现象：absolute 下弹窗跟着父容器滚动；margin: auto 在 fixed 下无效；没设 z-index 被其他元素盖住。
- 遮罩层必须设
position: fixed+inset: 0（或top/right/bottom/left: 0），并给足够高的z-index（比如1000） - 弹窗本体要加
position: fixed，不能依赖父级定位上下文 - 避免用
width: 100%或height: 100%直接撑满，会导致内容溢出或滚动条错位；用max-width和max-height配合overflow: auto
点击遮罩层关闭弹窗，但点击内容区不关闭
这是事件冒泡问题。遮罩层和弹窗是父子关系，点击弹窗会向上冒泡到遮罩层，触发关闭。解决方案是监听遮罩层的 click，但检查 event.target === 遮罩层 才执行关闭。
立即学习“前端免费学习笔记（深入）”；
使用场景：用户可能在弹窗里操作表单、拖拽或点击按钮，误关很伤体验。
- JS 中绑定事件时写成：
overlay.addEventListener('click', e => { if (e.target === overlay) closeDialog(); }); - 别用
overlay.onclick = closeDialog，它无法区分点击目标 - 移动端还要防 touch 误触，可加
touch-action: none到遮罩层防止缩放干扰
按 Esc 键关闭弹窗，且焦点不丢失
键盘交互是弹窗可访问性的底线。Esc 关闭是通用预期，但更关键的是：打开时要把焦点移到弹窗内第一个可聚焦元素，关闭时把焦点还给触发按钮。
容易踩的坑：document.activeElement 可能是 body，没存触发源；没禁用背景页面的 tab 导航（要用 inert 或手动管理 tabindex）。
- 打开弹窗后立即调用
dialogElement.querySelector('button, input, [href]')?.focus() - 监听
keydown事件，判断e.key === 'Escape'，然后关闭 - 关闭前记录触发按钮（比如加
data-dialog-trigger属性），关闭后triggerBtn.focus() - 现代方案可用
dialogElement.showModal()，但它不兼容 Safari 旧版，且样式定制受限
弹窗内容高度自适应，又不撑爆屏幕
固定高度写死会截断内容，height: auto 又可能超出视口。正确做法是用 max-height + overflow-y: auto，并确保内边距和标题高度不额外撑开。
性能影响：过度嵌套 flex/grid 容器或滥用 min-height 会导致重排卡顿，尤其在低端设备上。
- 弹窗容器设
display: flex; flex-direction: column;，内容区用flex: 1; overflow-y: auto; - 避免给弹窗整体设
height: 100vh，它包含浏览器地址栏高度，iOS Safari 会计算错误 - 用
@media (max-height: 600px)降级为全屏弹窗，提升小屏体验
最常被忽略的点是焦点管理与键盘导航——很多“能用”的弹窗一按 Tab 就跳到背景页，或者 Esc 按了没反应。这些不是锦上添花，而是用户能否顺利完成操作的分水岭。
