在 joomla 3 中使用 bootstrap 模态框时，点击按钮触发弹窗后，关闭模态框时焦点仍停留在原按钮上，影响可访问性与用户体验；本文提供两种可靠、兼容性强的 javascript + bootstrap 解决方案。
在 joomla 3 中使用 bootstrap 模态框时，点击按钮触发弹窗后，关闭模态框时焦点仍停留在原按钮上，影响可访问性与用户体验；本文提供两种可靠、兼容性强的 javascript + bootstrap 解决方案。
在 Joomla 3 环境中，模态窗口（Modal）通常基于 Bootstrap 3 实现。你遇到的问题——模态框关闭后焦点未移出触发按钮（#openModalButton）——属于典型的焦点管理缺失问题，不仅影响键盘导航用户（如视障人士使用屏幕阅读器），也违反 WCAG 可访问性标准（焦点应在模态关闭后合理归位）。
✅ 推荐方案一：利用 data-dismiss="modal" 属性（最简洁、无 JS 依赖）
Bootstrap 内置支持在触发按钮上添加 data-dismiss="modal"，它会在点击时自动触发模态关闭，并同步移除按钮自身焦点（Bootstrap 3.3.7+ 默认行为）。只需修改你的链接标签：
<a href="#myModal"
id="openModalButton"
class="btn btn-primary"
data-toggle="modal"
data-dismiss="modal">
Дізнатись ціну
</a>⚠️ 注意：移除 tabindex="-1" ——该属性会禁用按钮的键盘聚焦能力，导致无法通过 Tab 键访问，违背可访问性原则。应保留默认 tabindex="0"（对 <a> 标签天然有效）。
✅ 推荐方案二：监听模态关闭事件并主动 blur（更可控、适合复杂场景）
若需精细控制焦点流向（例如关闭后聚焦到页面顶部或特定元素），可监听 hidden.bs.modal 事件，并对触发按钮执行 .blur()：
<script>
jQuery(document).ready(function($) {
$('#myModal').on('hidden.bs.modal', function () {
$('#openModalButton').blur();
// 可选：将焦点转移到更语义化的位置，例如页面主标题
// $('h1').first().focus();
});
});
</script>✅ 此方案确保无论用户是点击“关闭”按钮、按 Esc 键还是点击背景遮罩层关闭模态框，都能统一清除按钮焦点。
❌ 为何你之前的代码未生效？
- tabindex="-1" 阻止了按钮获得初始焦点，也使 .focus() 对 #elementToFocus 失效（空 div 默认不可聚焦）；
- $('#openModalButton').blur() 在事件回调中调用是正确的，但若脚本未在 DOM 加载后执行（缺少 $(document).ready），或 jQuery 版本/作用域冲突，会导致绑定失败；
- $('#elementToFocus').focus() 无效，因该 div 缺少 tabindex 属性，无法成为焦点目标（需添加 tabindex="-1" 才可编程聚焦）。
✅ 最佳实践建议
- 始终保证可访问性：触发按钮必须可通过键盘操作（不加 tabindex="-1"）；
- 模态关闭后焦点归位：推荐聚焦到模态框标题（.modal-title）或页面逻辑起点（如 <main> 或首个 <h1>），而非简单 blur；
- Joomla 兼容提示：确保模板已正确加载 Bootstrap JS（通常由 JHtml::_('bootstrap.framework') 注入），且 jQuery 已初始化（避免 $ is not defined 错误）。
通过上述任一方案，即可彻底解决 Joomla 3 中模态框关闭后焦点滞留问题，提升网站可用性与合规性。
