嘿，我之前也碰到过一模一样的问题，结合Bootstrap 4的特性，给你几个靠谱的排查和解决思路：

• 检查jQuery依赖是否缺失
  Bootstrap 4的JavaScript组件是依赖jQuery的，你目前只引入了Bootstrap的JS文件，但没有引入jQuery，这大概率是遮罩无法自动消失的核心原因。你需要在Bootstrap JS之前引入jQuery，比如：

  <script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  

  注意：要确保jQuery的版本和Bootstrap 4兼容，3.x版本是没问题的。

• 手动移除遮罩元素
  如果是因为自定义交互逻辑或者事件冲突导致遮罩没被自动清理，可以监听模态框的hidden.bs.modal事件，手动移除遮罩：

  $('#modal').on('hidden.bs.modal', function () {
      // 移除所有残留的模态框遮罩
      $('.modal-backdrop').remove();
  });
  

• 确保使用正确的关闭方式
  一定要用Bootstrap官方提供的关闭方式，不要直接通过CSS修改模态框的显示状态：

  • 按钮添加data-dismiss="modal"属性：<button type="button" class="close" data-dismiss="modal" aria-label="Close">
  • 或者通过JS调用官方方法：$('#modal').modal('hide')
    直接用$('#modal').hide()这类操作会跳过Bootstrap的内部事件，导致遮罩无法被正确移除。

• 排查重复ID或嵌套模态框
  如果页面存在多个ID为modal的元素，或者模态框嵌套使用，会导致Bootstrap的事件绑定混乱，也可能出现遮罩残留的问题。确保每个模态框的ID唯一，尽量避免嵌套模态框的设计。

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