data属性仅是字符串容器，弹窗需JS读取dataset或getAttribute()触发；属性名含大写/下划线会转换为小写，连字符自动驼峰；JSON需手动parse；敏感信息勿存放；关闭应隐藏而非移除节点；dataset值恒为字符串。
data 属性本身不绑定任何行为，它只是个字符串容器；弹窗触发必须靠 JavaScript 主动读取 + 事件监听，不能指望写个 data-popup 就自动弹出来。
data-* 属性怎么传参给弹窗函数
核心是把业务数据塞进按钮等触发元素的 data- 属性里，再在 JS 中用 dataset 或 getAttribute() 拿出来。常见错误是属性名含大写字母或下划线，导致读不到值。
-
data-id="1024"合法，dataset.id可读；data-userId="1024"会被转成dataset.userid，别写dataset.userId - 带连字符的如
data-user-name="张三"→dataset.userName（自动驼峰），但data-2024-active必须用getAttribute('data-2024-active')，dataset["2024Active"]才能访问 - JSON 字符串要自己
JSON.parse()：data-config='{"theme":"dark"}'→JSON.parse(button.getAttribute('data-config'))，dataset.config拿到的是原始字符串 - 别把敏感信息放
data-里，比如 token、密码，源码里全可见
点击按钮时怎么用 data 属性控制弹窗内容
不是靠 onclick="showPopup(this)" 里直接传参，而是让 JS 在事件回调中动态读取当前按钮的 dataset，再填充到弹窗 DOM 中。否则多个按钮共用一个弹窗节点时会串数据。
- 编辑场景下，按钮上写
<button data-id="1024" data-name="张三" data-email="zhang@example.com">编辑</button> - JS 里用
event.target.closest('[data-id]')定位按钮（防止点到图标子元素时event.target不是按钮本身） - 回填表单时，逐个赋值：
form.elements.name.value = button.dataset.name，别用form.reset()，否则刚填的值被清空 - 弹窗里的
<input>必须有name属性，否则new FormData(form)拿不到值
为什么点了遮罩层或按 Esc 弹窗就丢数据
因为关闭逻辑写了 modal.remove() 或 form.reset()，而不是隐藏 + 保留状态。用户没点“确定”不等于放弃修改。
立即学习“前端免费学习笔记（深入）”；
- 关闭弹窗应设为
modal.style.display = 'none'，不是移除节点；下次打开复用同一 DOM 节点 - 按
Escape前加判断：if (!form.checkValidity() && !confirm('放弃修改？')) return; - 遮罩层点击关闭时，用
event.target === modalBackdrop判断是否点在背景上，别用event.target.classList.contains('close-btn')这类模糊匹配 - 提交前务必读
form.elements.xxx.value，而不是再读按钮上的dataset—— 用户可能已改过内容
真正容易被忽略的是：dataset 的值永远是字符串，dataset.count === "42"，不是数字；dataset.active === "true"，不是布尔。没人帮你自动转换，出错也不会报错，只会静默失效。
