后台数据添加/编辑必须用 modal，因其具备遮罩层、键盘控制与焦点捕获；需用原生 JS API 实例化，HTML 中须含 tabindex="-1" 和 role="dialog"，表单字段须绑定具体数据项，提交后手动隐藏并刷新表格。
弹窗用 modal 而不是 popover 或 tooltip
后台数据添加/编辑必须用 modal——它自带遮罩层、键盘控制（Esc 关闭）、焦点捕获，且能承载表单。用 popover 会丢失表单焦点管理，tooltip 根本不支持交互控件。modal 是唯一符合后台操作语义的组件。
注意 Bootstrap 5 移除了 jQuery 依赖，所有操作必须用原生 JS API：bootstrap.Modal.getOrCreateInstance()，别再写 $().modal('show')，否则控制台报错 Uncaught TypeError: $ is not a function。
- 确保引入了 Bootstrap 的 JS 文件（不仅是 CSS），否则
Modal类无法实例化 - HTML 中 modal 必须有
tabindex="-1"和role="dialog"，否则屏幕阅读器不可读、键盘 Tab 会跳出弹窗 - 不要手动写
display: block强制显示——这绕过 Bootstrap 的过渡动画和 backdrop 管理，导致关闭后背景灰层残留
表单字段要绑定到具体数据项（编辑场景）
添加和编辑共用一个 modal，但编辑时必须把当前行数据填入表单字段，否则用户改完提交的是空值或旧值。关键不是“怎么弹窗”，而是“怎么让弹窗知道该填什么”。
典型做法是：点击“编辑”按钮时，从 data-id、data-name 等自定义属性取值，再用 JS 填入 modal 内的 input：
document.getElementById('editModal').addEventListener('show.bs.modal', function (event) {
const button = event.relatedTarget;
const id = button.getAttribute('data-id');
const name = button.getAttribute('data-name');
const modal = bootstrap.Modal.getInstance(this);
document.getElementById('formId').value = id;
document.getElementById('formName').value = name;
});
- 务必监听
show.bs.modal（不是shown.bs.modal），前者在 modal 渲染前触发，避免闪动 - 如果后端返回的是 JSON 数据，别直接
JSON.parse()到 innerHTML——XSS 风险，用textContent或value属性赋值 - 日期字段（
type="date"）注意格式必须是YYYY-MM-DD，后端传2024-05-20T10:30:00Z会导致清空，需先new Date().toISOString().split('T')[0]
提交后要手动隐藏 modal 并刷新表格（非自动）
Bootstrap 不管你表单提交成功后做什么。常见错误是只发请求、不关弹窗，或者关了但表格没更新，用户以为没生效。
正确流程是：AJAX 成功回调里调用 modal.hide()，再更新 DOM 或重新拉取列表：
fetch('/api/users', {
method: 'POST',
body: new FormData(document.getElementById('editForm'))
}).then(r => r.json()).then(data => {
const modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
modal.hide(); // 必须显式调用
if (data.id) {
updateTableRow(data); // 或 location.reload()
}
});
- 别在
submit事件里用event.preventDefault()后什么都不做——用户点提交没反应，会反复点击 - 如果 modal 里有
select下拉框，且选项由 JS 动态生成，提交后记得重置其selectedIndex = 0，否则下次打开还是上次选中的值 - 网络失败时，要在 modal 内显示错误（如
div.alert-danger），而不是只 console.error——用户需要明确反馈
移动端弹窗容易被键盘顶起或遮挡
在 iOS Safari 和部分安卓浏览器中，聚焦 input 会唤起软键盘，可能把 modal 顶出视口，或遮住提交按钮。这不是 Bootstrap bug，是 viewport 行为差异。
最小干预方案是加一段轻量 JS，在 modal 显示时监听 focusin，对 input 和 textarea 做 scrollIntoView：
document.getElementById('editModal').addEventListener('shown.bs.modal', function () {
const inputs = this.querySelectorAll('input, textarea');
inputs.forEach(el => el.addEventListener('focusin', () => {
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}));
});
- 别用
position: fixed强制定位 modal——iOS 会失效，且破坏滚动兼容性 - 避免在 modal body 里放超过 3 层嵌套的 flex/grid 布局，某些安卓 WebView 会计算错高度，导致底部按钮不可见
- 测试时真机必测，模拟器里的键盘行为和真实体验差距很大
