React+TypeScript中Bootstrap Modal的.hide()方法失效问题

问题场景 #

提交模态框内的表单后，调用modalInstance.hide()关闭Bootstrap Modal，但页面留下灰色背景遮罩，无法点击任何元素也不能滚动页面。

原因分析 #

hide()方法执行异常，没有自动清除Bootstrap为模态框添加的全局样式和遮罩元素：

• body上被添加的modal-open类未被移除
• body的overflow属性被设置为hidden未恢复
• 页面中的.modal-backdrop遮罩元素未被删除

手动修复方案 #

在调用hide()后，手动执行以下清理操作：

方案1：jQuery实现 #

// 先调用官方方法关闭模态框
modalInstance.hide();
// 恢复body的原始样式
$('body').removeClass('modal-open').css('overflow', 'auto');
// 移除遮罩层元素
$('.modal-backdrop').remove();

方案2：原生JavaScript实现 #

modalInstance.hide();
// 恢复body样式
document.body.classList.remove('modal-open');
document.body.style.overflow = 'auto';
// 移除遮罩元素
const backdropEl = document.querySelector('.modal-backdrop');
if (backdropEl) {
  backdropEl.remove();
}

补充说明 #

这个问题通常出现在模态框的关闭逻辑和异步操作（比如表单提交的AJAX请求）耦合时，Bootstrap的自动清理流程被中断导致的。手动清理能确保页面状态完全恢复正常。

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