覆盖Bootstrap模态框的div内表单元素无法交互（除select外）

你遇到的问题是：自定义的覆盖div显示在Bootstrap模态框上方后，除了select元素外，其他表单元素（文本输入框、数字输入框、日期选择框、文本域等）均无法点击修改。

问题原因 #

Bootstrap模态框默认启用了**焦点陷阱（Focus Trap）**功能，会强制将焦点限制在模态框内部的元素中，防止用户与页面其他非模态框区域交互。你的覆盖div不属于模态框的DOM结构，因此其内部表单元素无法获取焦点；而select是浏览器原生系统控件，不受焦点陷阱限制，所以能正常工作。

解决方案一：将覆盖div移入模态框内部 #

把覆盖div放到模态框的内部容器（如modal-body）中，使其成为模态框的一部分，即可避开焦点陷阱的拦截。

修改后的完整HTML代码：

<!-- Bootstrap Modal -->
<button type="button" data-bs-toggle="modal" data-bs-target="#sampleModal" id="sampleModalBtn">show modal</button>
<div class="modal fade" id="sampleModal" tabindex="-1" role="dialog" aria-labelledby="sampleModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold"><span class="pe-2">Sample Modal</span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <button type="button" onclick="document.getElementById('overlapDivCon1').style.visibility = 'visible'">overlap div1</button>
                <button type="button">overlap div2</button>
                
                <!-- 将覆盖div移入模态框内部 -->
                <div class="d-flex justify-content-center overlapDivContainer" id="overlapDivCon1">
                    <div class="border border-secondary bg-white rounded-3 shadow overlapDiv">
                        <div class="p-2 border-bottom">
                            <form>
                                <a href="https://www.google.com" target="blank">check google</a>
                                <input type="text" class="form-control form-control-sm mb-2" placeholder="type text here">
                                <input type="number" class="form-control form-control-sm mb-2" placeholder="type number here">
                                <input type="date" class="form-control form-control-sm mb-2">
                                <select class="form-select form-select-sm mb-2">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                </select>
                                <textarea></textarea>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-md" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

CSS代码（补充定位属性确保覆盖全屏）：

.overlapDivContainer {
  background-color: rgba(0,0,0,.6);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1056;
  visibility: hidden;
  top: 0;
  left: 0;
}
.overlapDiv {
  width: 60%;
  margin-top: 2%;
}

解决方案二：禁用模态框的焦点陷阱 #

给模态框添加data-bs-focus="false"属性，直接关闭焦点陷阱功能，使页面所有元素均可正常获取焦点。

修改后的模态框代码：

<div class="modal fade" id="sampleModal" tabindex="-1" role="dialog" aria-labelledby="sampleModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-focus="false">
    <!-- 模态框内部内容保持不变 -->
</div>

覆盖div的HTML和CSS代码保持原内容即可。

解决方案三：通过JS动态控制焦点陷阱（进阶） #

如果需要在显示/隐藏覆盖div时动态切换焦点陷阱状态，可通过Bootstrap模态框实例实现：

// 获取模态框实例
const modal = new bootstrap.Modal(document.getElementById('sampleModal'));

// 显示覆盖div时关闭焦点陷阱
document.querySelector('button[onclick*="overlapDivCon1"]').addEventListener('click', () => {
    document.getElementById('overlapDivCon1').style.visibility = 'visible';
    modal._config.focus = false;
    modal._enforceFocus = () => {}; // 重写强制焦点的方法
});

// 隐藏覆盖div时恢复焦点陷阱（可选）
function hideOverlapDiv() {
    document.getElementById('overlapDivCon1').style.visibility = 'hidden';
    modal._config.focus = true;
    modal._enforceFocus = bootstrap.Modal.prototype._enforceFocus;
}

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