核心是用javascript监听卡片点击事件并动态显示遮罩层+内容容器；需用事件委托、data-id标识、fixed定位modal-overlay、body加overflow:hidden、焦点管理及资源释放。
点击卡片后怎么触发弹窗显示详情
核心是用 JavaScript 监听卡片元素的点击事件，再动态插入或显示一个遮罩层 + 内容容器。别直接写 onclick="showDetail(...)” 行内脚本，维护性差，也容易和模板逻辑耦合。
实操建议：
- 给每张卡片加唯一标识，比如
data-card-id="123"，而不是靠 DOM 位置或 class 名取数据 - 用事件委托绑定到卡片父容器（如
class="kanban-column"），避免为每张卡单独绑事件，尤其卡片动态增删时更稳定 - 弹窗内容不预渲染在 HTML 里（除非数据极固定），优先用 JS 拼接或 fetch 后填充，减少初始 HTML 体积
弹窗 DOM 结构怎么写才不踩 z-index 和滚动坑
常见错误：弹窗一出来就被 header 盖住、或者页面滚动时弹窗不动、或者 iOS 上 position: fixed 失效。根本原因是定位上下文和层叠上下文没理清。
实操建议：
- 弹窗最外层用
<div id="detail-modal" class="modal-overlay">，CSS 设 <code>position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; - 内部内容盒设
position: relative;或absolute居中，别用transform: translate(-50%, -50%)配合top: 50%; left: 50%—— 在某些安卓 WebView 下会触发重绘异常 - 弹窗显示时立刻给
加overflow: hidden;，否则滚动条还在，用户仍可滚页面，视觉错乱 - 在
里确保有 viewport 声明：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，但user-scalable=no要慎用，影响可访问性 - 弹窗宽度用
max-width: 90vw+min-width: 300px，高度用max-height: 80vh并配合overflow-y: auto，防止内容溢出不可见 - 关闭按钮必须足够大（至少 44×44px），且支持 touchstart 事件，iOS Safari 对 click 有 300ms 延迟
- 关闭时手动调用
removeEventListener清掉 ESC 键监听（document.addEventListener('keydown', escHandler)） - 用
element.focus()把焦点切回原卡片，方便键盘用户继续操作；如果原卡片已销毁，就 fallback 到最近的可聚焦元素 - 如果弹窗里用了第三方组件（如日期选择器、富文本编辑器），显式调用其
destroy()或unmount()方法，别只删 DOM
怎么让弹窗内容响应式适配手机和桌面
不是简单加个 @media 改宽高就行。关键在于交互方式差异：桌面靠鼠标悬停/点击，手机要支持手势关闭、适配软键盘弹出、避免缩放被禁用导致文字过小。
实操建议：
关闭弹窗时如何正确释放资源和恢复状态
很多人只管 display: none，结果下次打开还是旧数据、键盘焦点没归位、ESC 键失效、甚至内存泄漏（比如监听器没解绑）。
实操建议：
visibilitychange 事件可能触发状态错乱；还有 Safari 移动端对 backdrop-filter 的兼容性差，模糊背景慎用。
