当 Bootstrap 模态框 HTML 元素虽未显示但仍在 DOM 中处于“可见层叠上下文”时，会意外覆盖表单区域，造成点击后所有表单控件看似被禁用——实际是模态框透明背景拦截了鼠标事件。根本解法是确保模态框初始状态为 display: none。
当 bootstrap 模态框 html 元素虽未显示但仍在 dom 中处于“可见层叠上下文”时，会意外覆盖表单区域，造成点击后所有表单控件看似被禁用——实际是模态框透明背景拦截了鼠标事件。根本解法是确保模态框初始状态为 `display: none`。
在使用 Bootstrap 的 MVC 应用中，模态框（如 #confirmationModal）若仅依赖 fade 和 hidden 类控制显隐，而未显式设置 display: none，即使其视觉上不可见，仍可能占据文档流中的层叠位置（z-index 默认较高），从而捕获所有鼠标事件——用户点击表单任意位置时，实际触发的是模态框的透明 backdrop 或 modal-dialog 区域，导致表单失去焦点、输入失灵，产生“输入框被禁用”的错觉。
问题根源分析
Bootstrap 4/5 的 .modal 默认样式中，.modal.fade 在隐藏状态下依赖 opacity: 0 和 visibility: hidden，但未重置 display 属性。若模态框未通过 JavaScript 显式调用 .modal('hide') 初始化，或未在 DOM 加载时强制隐藏，其 display 可能保持为 block（尤其在服务端渲染或动态注入场景下）。此时，尽管模态框内容不可见，其 position: fixed + 高 z-index（默认 1050）会形成一个全屏覆盖层，静默拦截所有底层交互。
解决方案：强制初始隐藏
在模态框根元素上直接添加 style="display: none"，确保其从页面加载起即脱离渲染流：
<!-- ✅ 正确：显式声明 display: none -->
<div class="modal fade" id="confirmationModal" style="display: none;">
<div class="modal-dialog">
<!-- ... 模态框内容 ... -->
</div>
</div>⚠️ 注意：不要仅依赖 class="modal fade" 或 aria-hidden="true" —— 这些属性不改变 display，无法解除层叠拦截。
进阶建议：统一初始化逻辑
在 $(document).ready() 中主动隐藏模态框，双重保险：
$(function() {
// 确保模态框初始状态为隐藏且 display: none
$('#confirmationModal').modal('hide');
// 或手动重置样式（兼容性更强）
$('#confirmationModal').css('display', 'none');
});验证与调试技巧
- 打开浏览器开发者工具 → 选中任意表单 <input> → 查看 :hover 状态是否响应；若悬停无反馈，尝试在 Elements 面板中临时删除 <div class="modal"> 节点，观察表单是否立即恢复交互。
- 使用 getComputedStyle(document.getElementById('confirmationModal')).display 检查运行时 display 值，确认是否为 "none"。
总结
该问题本质是 CSS 层叠与事件捕获机制的典型冲突，而非 JavaScript 逻辑错误。修复核心在于：让模态框真正“消失”，而非仅仅“变透明”。添加 style="display: none" 是最轻量、兼容性最佳的方案，适用于所有 Bootstrap 版本，并避免后续因 modal 实例化状态不一致引发的连锁问题。
