用 Bootstrap 5 Modal 实现删除确认框需手动 JS 控制显隐、传参（data-id）、清空 dataset.id；必须设置 role="dialog"、aria-labelledby、aria-hidden、tabindex="-1" 保障无障碍；确认按钮须禁用并显示加载态防重复提交。
用 Bootstrap 5 的 Modal 实现删除确认框，别直接用 Alert
Bootstrap 自带的 alert 组件不支持交互操作，不能做删除确认；必须用 Modal。它自带 backdrop、键盘关闭（Esc）、点击遮罩不关闭等行为，默认是「静态」的，但删除场景需要手动控制显隐和按钮逻辑。
关键点：不要用 data-bs-toggle="modal" 直接触发，否则无法传参（比如要删哪条记录的 id）；得用 JS 手动初始化 + 触发，并把目标 ID 写进 Modal 的 data 属性里。
- 在删除按钮上加
data-id="123"和onclick="showDeleteConfirm(event)" - Modal 的确认按钮绑定
onclick="doDelete()"，从document.getElementById('deleteModal').dataset.id取值 - 务必在 Modal 关闭后清空
dataset.id，否则下次点别的行会删错
Modal HTML 结构必须包含 aria-label 和 role 属性
否则屏幕阅读器无法识别这是对话框，也不符合 WCAG。Bootstrap 5 要求显式声明 role="dialog" 和 aria-labelledby，否则某些浏览器（如 Safari + VoiceOver）会跳过整个弹窗。
标准结构里，标题元素需有 id="deleteModalLabel"，Modal 根节点写 aria-labelledby="deleteModalLabel"；同时加上 aria-hidden="true"（JS 显隐时动态切换）。
- 缺
role="dialog"→ Chrome DevTools 的 Accessibility 面板报错 - 没
aria-labelledby→ 读屏软件只读“对话框”，不读标题内容 -
tabindex="-1"必须保留，否则焦点可能落在背景元素上
用 JavaScript 控制 Modal，避免 jQuery 依赖
Bootstrap 5 默认弃用 jQuery，所有操作走 bootstrap.Modal 实例。直接调 new bootstrap.Modal(...).show() 是最稳妥的，比用 data-bs-* 属性触发更可控。
const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
function showDeleteConfirm(e) {
const btn = e.target.closest('[data-id]');
const id = btn.dataset.id;
document.getElementById('deleteModal').dataset.id = id;
deleteModal.show();
}
function doDelete() {
const id = document.getElementById('deleteModal').dataset.id;
fetch(`/api/items/${id}`, { method: 'DELETE' })
.then(() => {
// 删完刷新表格或移除 DOM 行
deleteModal.hide();
document.getElementById('deleteModal').dataset.id = '';
});
}
确认按钮禁用状态和加载反馈不能少
用户点「确定」后，按钮必须立刻 disabled 并显示 loading 文本（比如「删除中…」），否则连点两次会发两个 DELETE 请求——后端未必幂等，前端也容易重复渲染。
- 按钮初始文本设为
data-original-text="确定删除"，点击后改innerText = "删除中…"并加disabled - 成功或失败后，恢复按钮状态并重置文本（用
dataset.originalText） - 别用 CSS 隐藏按钮，要用
disabled属性，否则键盘用户仍可 Enter 提交
后台删除确认不是 UI 装饰，而是防止误操作的最后一道闸。Modal 的显隐时机、ID 传递方式、无障碍属性、按钮防抖，四者缺一不可。漏掉任意一个，都可能让功能在特定设备、网络或操作习惯下失效。
