Bootstrap 模态框(Modal)关闭后焦点返回原按钮-Bootstrap教程-PHP中文网

bootstrap模态框关闭后默认不自动恢复焦点至触发按钮，因其未记录触发源且关闭时仅聚焦body或无操作；需手动在show.bs.modal中缓存e.relatedtarget，并在hidden.bs.modal中延时focus回原按钮。

默认情况下，bootstrap 模态框关闭后**不会自动将焦点返回到触发它的按钮**，而是丢给 document.body 或上一个可聚焦元素（行为因浏览器和 bootstrap 版本略有差异）。这违反 wcag 可访问性要求，也影响键盘用户操作流。

为什么关闭后焦点没回原按钮？

Bootstrap 本身不记录触发源，data-dismiss="modal" 和 .modal('hide') 都不保存或恢复焦点上下文。原按钮可能已失焦、被销毁，或 DOM 重排导致其失去“可恢复焦点”状态。

点击按钮打开模态框时，焦点会移到模态框第一个可聚焦元素（如 .close 或 input），但原始按钮引用未被缓存
模态框关闭后，Bootstrap 仅执行 focus() 到 document.body（Bootstrap 3）或不做显式焦点管理（Bootstrap 4/5）
若用 a 标签作触发器且未加 href="javascript:;" 或 preventDefault()，还会触发页面跳转，彻底丢失焦点位置

手动保存并恢复触发按钮焦点

必须在打开前缓存触发元素，并在 hidden.bs.modal 事件中主动 .focus() 回去。注意：要确保该元素仍存在于 DOM 且可聚焦（例如没被 display: none 或 disabled）。

监听 show.bs.modal 事件，在里面用 e.relatedTarget 获取触发按钮（仅适用于 data-toggle 触发方式）
把触发元素存为模态框实例的 data 属性：$(e.target).data('trigger', e.relatedTarget)
在 hidden.bs.modal 中取回并 focus：$(e.target).data('trigger')?.focus()
如果用 JS 主动调用 .modal('show')，需手动传入触发源，例如：$('#myModal').data('trigger', $btn).modal('show')

$('#myModal').on('show.bs.modal', function (e) {
  $(this).data('trigger', e.relatedTarget);
}).on('hidden.bs.modal', function (e) {
  const trigger = $(this).data('trigger');
  if (trigger && trigger.length) trigger[0].focus();
});

data-toggle 触发时的常见陷阱

看似最简单的 data-toggle="modal" 方式，反而最容易踩坑——因为 e.relatedTarget 在某些场景下为 null。

VPS Bootstrap

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

下载

触发元素是 <a href="#"></a>：点击后 URL hash 变化，可能干扰事件捕获；应改用 href="javascript:void(0)" 或 event.preventDefault()
模态框通过 JS 多次初始化（如重复调用 .modal()）：旧事件监听器残留，e.relatedTarget 可能指向已销毁节点
触发按钮是动态插入的（如 Vue/React 渲染后）：需确保事件委托绑定在父容器，或在插入后立即初始化监听
使用 backdrop: 'static' 或禁用 keyboard 后，用户只能靠按钮关闭——此时焦点返回更关键，否则键盘用户卡死