Bootstrap 5 可交互背景无遮罩模态框实现求助

核心问题 #

Bootstrap 5 对比4版本，模态框打开时会触发两个关键限制：

• 给<body>添加.modal-open类，强制设置overflow: hidden并禁用背景滚动
• 默认启用焦点锁定，强制焦点留在模态框内部，直接阻止背景元素的交互操作

具体解决方案 #

1. 解除body的滚动限制

在自定义CSS中覆盖.modal-open类的默认样式，恢复背景滚动：

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

2. 关闭模态框的焦点锁定

这是让背景可交互的关键，有两种实现方式：

• HTML标签直接设置属性：

<div class="modal" tabindex="-1" data-bs-backdrop="false" data-bs-focus="false">
  <!-- 模态框内部内容 -->
</div>

• JS初始化时配置选项：

const myModal = new bootstrap.Modal(document.getElementById('yourModalId'), {
  backdrop: false,
  focus: false
})

3. 修复模态框自身交互（可选）

如果背景元素仍无法点击，检查.modal-dialog的事件拦截，添加以下CSS确保模态框自身可交互且不影响背景：

.modal-dialog {
  pointer-events: auto;
}

完整可运行示例 #

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body.modal-open {
      overflow: auto !important;
    }
  </style>
</head>
<body>
  <p>这是背景文本，试试选中我或者滚动页面</p>
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#freeModal">
    打开无限制模态框
  </button>

  <div class="modal fade" id="freeModal" tabindex="-1" data-bs-backdrop="false" data-bs-focus="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">无遮罩可交互模态框</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <p>现在背景元素可以正常操作了</p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

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