Bootstrap Modal关闭异常、控制台报错及遮罩残留问题如何解决？

架构老林

2026-9-29

问题修复方案

问题1：二次点击Sign Up按钮报`load is not a function`错误

根因

Sign Up按钮同时设置了Bootstrap原生触发Modal的data-toggle="modal"、data-target="#theModal"属性，又自定义了click事件手动调用modal('show')，一次点击会触发两次Modal实例的显示逻辑，导致jQuery链式调用中断，load方法无法正常调用。

修复方法

移除按钮上的data-toggle="modal"和data-target="#theModal"两个属性，避免重复触发Modal。

问题2：关闭Modal后遮罩层残留、页面失焦

根因

同样是Modal重复触发导致生成了多个遮罩层实例，关闭Modal时只销毁了其中一个实例的遮罩层，剩余遮罩层未被正常清除，同时body标签上的modal-open类未被移除，导致页面无法滚动交互。

修复方法

新增Modal关闭事件监听，关闭时手动清理残留的遮罩层和状态类。

修复后的完整代码

按钮部分

<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" linkFile="contact.html">Sign Up</button>

脚本部分

$('.signup').on('click', function(e){
  e.preventDefault();
  const loadFile = $(this).attr('linkFile');
  // 先清空历史内容，加载完成后再显示Modal，避免加载过程白屏
  $('#theModal').find('.modal-body').empty().load(loadFile, function() {
    $('#theModal').modal('show');
  });
});

// 监听Modal关闭事件，彻底清理状态
$('#theModal').on('hidden.bs.modal', function () {
  // 清空Modal内容
  $(this).find('.modal-body').empty();
  // 移除残留遮罩层
  $('.modal-backdrop').remove();
  // 恢复页面滚动权限
  $('body').removeClass('modal-open');
});