为什么通过wire:click和dispatch事件打开Bootstrap模态框会阻塞后台菜单滚动

问题产生原因 #

• 核心诱因是Bootstrap模态框的滚动锁定逻辑未正常复位：Bootstrap打开模态框时会自动给<body>添加.modal-open类，该类设置overflow: hidden禁止背景滚动。原生通过data-toggle触发模态框时，关闭操作会自动移除该类恢复滚动；但通过Livewire的wire:click派发事件手动触发模态框显示时，Bootstrap内部状态关联断裂，关闭模态框时遗漏了.modal-open类的移除逻辑，导致页面始终处于滚动锁定状态。
• 代码存在两处语法错误放大了异常：一是第二种触发写法的span标签缺失左尖括号<，二是后台菜单代码中Add year对应的a标签多了一个冗余的</a>闭合标签，两类错误会导致DOM结构解析异常，干扰Bootstrap的事件绑定和类名操作。
• 特殊场景下Livewire的DOM重绘逻辑会打断Bootstrap模态框的关闭事件监听，导致复位回调没有正常执行。

可行解决方法 #

方法1：显式监听模态框关闭事件强制复位（最推荐） #

在页面JS中添加如下逻辑，所有模态框关闭时主动清理滚动锁定状态：

$('.modal').on('hidden.bs.modal', function () {
    // 移除滚动锁定类
    $('body').removeClass('modal-open');
    // 清理可能残留的模态框遮罩层
    $('.modal-backdrop').remove();
    // 强制恢复body滚动属性
    $('body').css('overflow', 'auto');
});

方法2：修正代码语法错误 #

1. 补全span标签的左尖括号：将错误写法修正为<span class="sub-item">Add Year</span>
2. 删除后台菜单中Add year对应a标签的冗余</a>闭合标签，保证DOM结构合法。

方法3：统一模态框触发逻辑 #

在全局JS中按Bootstrap标准规范监听Livewire派发的事件，保证模态框状态管理统一：

window.addEventListener('ModalYearVisible', () => {
    $('#modalYear').modal('show');
});
window.addEventListener('ModalListVisible', () => {
    $('#ListYear').modal('show');
});

方法4：兜底兼容方案 #

如果不需要模态框打开时禁止背景滚动，可以直接在全局CSS中覆盖默认规则：

body.modal-open {
    overflow: auto !important;
}

内容的提问来源于stack exchange，提问作者Nano