Bootstrap 5.0+模态框移除背景遮罩后仍无法交互的解决方案

在Bootstrap 5.0及以上版本中，即使给模态框设置backdrop: false，页面仍会存在一层全屏隐形覆盖层（来自.modal元素本身的全屏fixed定位），导致背景元素无法被点击交互。此前针对导航栏的解决方案仅通过调整z-index实现，直接应用到页面主体时会遮挡模态框本身，无法满足需求。

解决步骤： #

1. 修正配置冲突
   确保模态框的HTML属性与JS初始化参数一致，避免data-bs-backdrop="static"与JS中backdrop: false的冲突，移除HTML中的data-bs-backdrop="static"属性。

2. 添加自定义CSS
   重写.modal的布局样式，让它不再全屏覆盖页面，仅保留对话框的固定居中定位：

   .modal.no-backdrop {
     position: unset;
     background-color: transparent;
     overflow: visible; /* 移除默认的overflow:hidden，避免页面被锁定 */
   }
   .modal.no-backdrop .modal-dialog {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     margin: 0;
   }
   

3. 修改模态框HTML结构
   给模态框的根元素添加自定义类no-backdrop：

   <!-- 触发模态框的按钮 -->
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
     启动无背景遮罩模态框
   </button>
   
   <!-- 模态框 -->
   <div class="modal fade no-backdrop" id="staticBackdrop" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="staticBackdropLabel">模态框标题</h1>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
         </div>
         <div class="modal-body">
           ...
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
           <button type="button" class="btn btn-primary">确认</button>
         </div>
       </div>
     </div>
   </div>
   

4. 正确初始化模态框

   const modal = new bootstrap.Modal('#staticBackdrop', {
     keyboard: false,
     backdrop: false
   })
   

原理说明 #

默认情况下，.modal元素使用position: fixed并占满全屏，即使背景透明也会遮挡下层元素。通过将.modal的position改为unset，同时单独给.modal-dialog设置固定居中定位，既保留了模态框的悬浮效果，又让页面背景元素可以正常交互。

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