怎么用Bootstrap制作后台删除数据确认提示框-Bootstrap教程-PHP中文网

用 Bootstrap 5 Modal 实现删除确认框需手动 JS 控制显隐、传参（data-id）、清空 dataset.id；必须设置 role="dialog"、aria-labelledby、aria-hidden、tabindex="-1" 保障无障碍；确认按钮须禁用并显示加载态防重复提交。

怎么用bootstrap制作后台删除数据确认提示框

用 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 显隐时动态切换）。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

缺 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 = '';
    });
}