<p>ModalDataTransfer 不是 Bootstrap 官方 API，而是误用的自定义名称；正确传值应通过 data-* 属性配合 show.bs.modal 事件 + event.relatedTarget 获取数据并逐字段赋值。</p>
ModalDataTransfer 是什么？它不是 Bootstrap 官方 API
Bootstrap 本身不提供 ModalDataTransfer 这个函数或类——你看到的很可能是某段自定义封装代码、第三方插件，或者命名错误。直接搜 ModalDataTransfer 在 Bootstrap 5/4 文档里查不到任何结果。如果你在控制台报错 ReferenceError: ModalDataTransfer is not defined，基本可以确定是误用了不存在的全局方法。
真正可行的传值路径只有两条：手动 DOM 操作，或利用 Bootstrap 的事件机制 + 数据属性。
用 show.bs.modal 事件 + data-* 属性传参最稳妥
这是官方推荐、兼容性好、无额外依赖的做法。核心思路是：点击触发模态框的元素（比如按钮）上提前存好数据，模态框显示前通过事件取出来，填进表单字段。
- 给触发按钮加
data-id="123"、data-title="编辑用户"等自定义属性 - 监听
show.bs.modal事件，在回调中用event.relatedTarget拿到触发它的那个元素 - 用
dataset读取属性，再用querySelector或getElementById更新模态框内表单控件的value或textContent
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal" data-id="42" data-name="张三">编辑</button>
<div class="modal fade" id="editModal">
<div class="modal-dialog">
<div class="modal-content">
<input type="hidden" name="id" id="edit-id">
<input type="text" name="name" id="edit-name">
</div>
</div>
</div>
const editModal = document.getElementById('editModal')
editModal.addEventListener('show.bs.modal', event => {
const button = event.relatedTarget
const id = button.dataset.id
const name = button.dataset.name
editModal.querySelector('#edit-id').value = id
editModal.querySelector('#edit-name').value = name
})
别直接操作 innerHTML 填充整个表单
有人会想“干脆把整段带值的 HTML 字符串塞进 .modal-body”，这容易出问题：
- 表单控件的
name属性可能重复，导致提交时参数覆盖 - 如果模态框里用了 Vue/React 组件或初始化了第三方插件（如日期选择器），
innerHTML替换会销毁实例，JS 逻辑失效 - XSS 风险：若传入的数据未转义就拼进 HTML，可能执行恶意脚本
正确做法始终是单独设置每个字段的 value、textContent 或 checked 等原生属性，而不是重写结构。
动态加载内容时注意 shown.bs.modal 和异步时机
如果模态框内容需要 AJAX 加载（比如拉取用户详情），不能在 show.bs.modal 里直接填值——此时 DOM 已显示但内容还没回来。必须等请求完成后再赋值，并确保表单元素已存在。
- 优先用
shown.bs.modal（注意是shown不是show），它保证模态框完全渲染完毕 - AJAX 成功回调里再操作 DOM；如果怕元素还没挂载，可加一层
setTimeout(..., 0)或用requestAnimationFrame - 避免在
hide.bs.modal里清理数据，因为用户可能反复打开关闭；应在每次show.bs.modal时重置初始状态
传值这件事本身不难，难的是记住：Bootstrap 模态框只是容器，数据流必须由你主动控制，没有魔法函数替你兜底。
