show.bs.modal事件是唯一可靠的Modal数据传入入口，需通过event.relatedTarget获取触发按钮的data-bs-*属性，在回调中动态填充内容并清空残留值。
show.bs.modal 事件是唯一靠谱的入口点
bootstrap modal 本身不提供“传参”接口，所有动态数据填充必须靠监听 show.bs.modal 事件来触发。这个事件在模态框 dom 渲染前、但已确定要显示时触发，此时 event.relatedtarget 稳定指向你点击的那个按钮——这是唯一能可靠拿到上下文的地方。
- 别用
click直接触发.modal('show')后再手动填值：Modal 可能还没初始化完，find()找不到元素，或被后续 show 动画覆盖 - 别在按钮上写
onclick="fillModal(data)"：data 是 JS 对象？PHP 数组？序列化/转义极易出错，且破坏 HTML 语义 - Bootstrap 5+ 必须用
data-bs-*（不是data-或data-toggle），否则relatedTarget拿不到属性
data-bs-* 属性只能存字符串，复杂对象得自己处理
HTML 的 data-* 属性天生只接受字符串，所以不能直接 data-bs-user='{"id":1,"name":"张三"}' —— 浏览器会把它当无效 HTML 解析，取出来是空或乱码。
- 简单字段（ID、邮箱、状态码）：直接用
data-bs-id="123"、data-bs-email="a@b.com" - 多字段对象：先 JSON.stringify() 后 URL 编码，例如
data-bs-payload="%7B%22id%22%3A1%2C%22name%22%3A%22%E5%BC%A0%E4%B8%89%22%7D"，在事件里decodeURIComponent()+JSON.parse() - 千万别把敏感字段（如 token、密码）塞进 data 属性——它明文暴露在 DOM 里
模态框必须全局唯一，否则 data 属性全失效
常见错误是在 PHP/JS 循环里为每一行生成一个完整模态框，ID 全叫 #editModal。浏览器 document.getElementById 只返回第一个，show.bs.modal 事件也永远只绑在第一个上，后面所有按钮都填错数据。
- 表格里每个“编辑”按钮，
data-bs-target必须指向同一个模态框 ID，例如data-bs-target="#editModal" - 模态框 HTML 只能出现一次，放在
<body>底部或<table>外面，别套在while或for里 - 如果真需要多个不同结构的 Modal（如“编辑用户”和“删除确认”），就用不同 ID + 不同事件监听器，别复用同一套逻辑
表单提交前记得清空上次残留值
Modal 是复用的 DOM 节点，关掉再打开不会自动重置 input 值。如果上次填了“张三”，这次点“李四”的编辑按钮，没显式赋值的话，姓名框可能还显示“张三”。
- 在
show.bs.modal回调开头加一句$(this).find('input,select,textarea').val('');，避免脏数据干扰 - 隐藏域（
<input type="hidden">）尤其容易被忽略——它没视觉反馈，但后端会收到旧值 - 如果 Modal 里有富文本编辑器（如 TinyMCE）、日期选择器（如 flatpickr），它们的状态不会被
val('')清除，得单独调用其 API 重置
实际开发中，最常卡住的不是怎么传，而是忘记 Modal 是“活”的 DOM——它不随每次点击重建，所有状态都会累积。哪怕只是改个按钮文字，也要想清楚：这个操作会不会影响下一次打开时的初始值。
