本文详解 joomla 3 使用 bootstrap 3 模态框（modal）时，点击按钮触发弹窗后焦点仍停留在原按钮上的问题，提供两种稳定有效的修复方案，并附可直接运行的代码示例与关键注意事项。
本文详解 joomla 3 使用 bootstrap 3 模态框（modal）时，点击按钮触发弹窗后焦点仍停留在原按钮上的问题，提供两种稳定有效的修复方案，并附可直接运行的代码示例与关键注意事项。
在 Joomla 3 中，基于 Bootstrap 3 的模态窗口（modal fade）常用于展示表单、价格咨询等内容。但一个常见且影响无障碍访问（a11y）与用户体验的问题是：当用户点击按钮打开模态框，再通过“关闭”或点击遮罩层关闭后，焦点仍滞留在触发按钮（如 #openModalButton）上——这不仅违反 WCAG 焦点管理规范，还可能导致键盘用户重复触发、屏幕阅读器行为异常。
问题根源在于：Bootstrap 3 的 hidden.bs.modal 事件触发时，原按钮并未自动失焦；而手动调用 .blur() 或尝试聚焦到空元素（如 #elementToFocus）往往失效，原因包括 DOM 渲染时机、事件冒泡干扰或 Joomla 模块/插件对 jQuery 的封装限制。
✅ 推荐方案一：利用 Bootstrap 原生 data-dismiss="modal" 属性（最简洁可靠）
无需额外 JS，直接在触发按钮中添加 data-dismiss="modal"，使按钮同时具备“打开模态框 + 关闭后自动释放焦点”的双重能力：
<a href="#myModal" id="openModalButton" class="btn btn-primary" data-toggle="modal" data-dismiss="modal" tabindex="0">
Дізнатись ціну
</a>
⚠️ 注意：tabindex="0"（而非 -1）确保该按钮仍可被键盘聚焦，符合可访问性要求；tabindex="-1" 会使其完全脱离焦点流，导致键盘用户无法操作。
Text To Image下载一款AI图像与设计工具，主要用于将文本渲染为图片并返回临时本地文件路径，支持可选的 data URI。适用于 Clawhub 或 Codex，用于将纯文本或带样式的文本进行转换，适合需要提升相关任务效率的用户。
✅ 推荐方案二：监听按钮点击事件并主动失焦（兼容性更强）
若因模板冲突或自定义逻辑无法使用方案一，可在按钮点击瞬间立即执行 blur()，避免焦点残留：
<script>
jQuery(document).ready(function($) {
$('#openModalButton').on('click', function(e) {
// 确保在模态框显示前就移除焦点（防抖+兼容）
setTimeout(function() {
$(e.currentTarget).blur();
}, 0);
});
// 可选：增强健壮性 —— 在模态框隐藏后再次确认失焦
$('#myModal').on('hidden.bs.modal', function () {
$('#openModalButton').blur();
// 可选：将焦点安全转移至页面首个可聚焦元素（如跳转链接）
// $('header a, main a').first().focus();
});
});
</script>
? 关键注意事项：
- 务必使用 jQuery(document).ready() 包裹脚本，确保 DOM 加载完成；
- Joomla 3 默认加载 jQuery，但需避免与 $ 冲突，建议统一用 jQuery 或使用 jQuery.noConflict()；
- 若模态内容含表单，应在 shown.bs.modal 事件中将焦点自动移入第一个输入框（如 $('.modal-body input:first').focus()），提升用户体验；
- 测试时请启用浏览器键盘导航（Tab/Shift+Tab），验证焦点流是否自然、无跳变。
综上，优先采用方案一（data-dismiss="modal"） —— 它轻量、原生、零 JS 依赖，完美契合 Joomla 3 + Bootstrap 3 技术栈；方案二作为兜底策略，适用于复杂定制场景。二者均可彻底解决焦点滞留问题，显著提升网站可用性与合规性。
