本文详解 Joomla 3 中 Bootstrap 模态框（Modal）关闭后按钮仍保留焦点的问题，提供两种稳定可靠的解决方案：利用 data-dismiss="modal" 属性自动失焦，或通过点击事件手动触发 blur()，确保符合无障碍（WCAG）标准并提升用户体验。
本文详解 joomla 3 中 bootstrap 模态框（modal）关闭后按钮仍保留焦点的问题，提供两种稳定可靠的解决方案：利用 `data-dismiss="modal"` 属性自动失焦，或通过点击事件手动触发 `blur()`，确保符合无障碍（wcag）标准并提升用户体验。
在 Joomla 3 中集成 Bootstrap 3 的模态窗口时，一个常见但易被忽视的可访问性问题是：当用户点击按钮打开模态框、再关闭后，焦点仍停留在原触发按钮上（如 <a> 标签），导致键盘用户无法自然向下导航，甚至可能重复触发模态框，违反 WCAG 2.1 中“焦点顺序合理”和“焦点可见性”的要求。
问题根源在于：Joomla 3 默认加载的 Bootstrap 3 JS 并未自动将焦点返还至页面上下文，而 tabindex="-1" 虽阻止了初始 Tab 进入，却无法干预关闭后的焦点行为。
✅ 推荐方案一：语义化属性修复（首选）
直接为触发按钮添加 data-dismiss="modal" 属性——这不仅声明了“该元素用于关闭模态框”，更关键的是，Bootstrap 内部会在此类元素被点击后自动执行 this.blur()，并在模态隐藏流程中主动释放焦点：
<a href="#myModal"
id="openModalButton"
class="btn btn-primary"
data-toggle="modal"
data-dismiss="modal">
Дізнатись ціну
</a>⚠️ 注意：href="#myModal" 和 data-toggle="modal" 仍需保留以保证正常触发；data-dismiss="modal" 在此处不表示“关闭当前模态”，而是作为 Bootstrap 的焦点管理钩子，对非模态上下文无副作用。
✅ 推荐方案二：显式 JavaScript 失焦（兼容性强）
若因模板冲突或自定义逻辑需更精细控制，可在按钮点击瞬间立即移除焦点（比监听 hidden.bs.modal 更可靠，避免竞态）：
<script>
jQuery(document).ready(function($) {
$('#openModalButton').on('click', function(e) {
// 确保点击后立即失焦，防止关闭后残留
this.blur();
// 可选：强制将焦点移至 body 或首个可聚焦元素（增强可访问性）
// $('body').focus();
});
});
</script>? 重要补充说明：
- 避免使用 $('#openModalButton').blur() 在 hidden.bs.modal 回调中调用——此时模态框 DOM 尚未完全退出动画，且按钮可能已被临时禁用，导致失焦失败；
- 若需更高阶的无障碍支持（如模态打开后自动聚焦首输入框、关闭后回归触发点），应结合 autofocus 属性与 focusin 事件委托实现；
- 所有脚本务必包裹在 jQuery(document).ready() 中，确保 DOM 加载完成后再绑定事件。
两种方法均已在 Joomla 3.10 + Bootstrap 3.4.1 环境下实测有效。建议优先采用方案一（纯 HTML 属性），简洁、无依赖、零 JS 错误风险；方案二适用于需要统一管理多个触发器或集成第三方插件的复杂场景。
