浏览器全屏模式下Bootstrap Modal遮罩层显示异常问题

问题描述 #

当包含Bootstrap Modal的Mapbox地图容器（#map-container）进入浏览器全屏模式后，打开Modal时，遮罩层（modal-backdrop）会被默认添加到body末尾，处于全屏地图容器的后方导致不可见；非全屏状态下显示正常。

我们需要将遮罩层移动到#map-container内部，与Modal同级，结构如下：

<div id="map-container">
  <!-- Mapbox地图内容 -->
  <div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <!-- Modal内容 -->
      </div>
    </div>
  </div>
  
  <div class="modal-backdrop fade show"></div> <!-- 遮罩层移至此位置 -->
</div>

解决方案 #

方法1：Bootstrap配置 + 事件监听（推荐） #

通过配置Modal的挂载容器，结合事件监听将遮罩层移动到目标容器内，适配不同Bootstrap版本：

针对Bootstrap 5

1. 给Modal元素添加data-bs-container="#map-container"属性，指定Modal挂载到地图容器：

<div class="modal" id="your-modal-id" tabindex="-1" role="dialog" data-bs-container="#map-container">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- 此处填写Modal内容 -->
    </div>
  </div>
</div>

2. 添加JavaScript监听Modal显示/隐藏事件，移动并清理遮罩层：

const modal = document.getElementById('your-modal-id');

// 显示Modal时移动遮罩层
modal.addEventListener('show.bs.modal', () => {
  // 延迟执行确保遮罩层已生成
  setTimeout(() => {
    const backdrop = document.querySelector('.modal-backdrop');
    const mapContainer = document.getElementById('map-container');
    if (backdrop && mapContainer) {
      mapContainer.appendChild(backdrop);
    }
  }, 10);
});

// 隐藏Modal时移除遮罩层
modal.addEventListener('hidden.bs.modal', () => {
  const backdrop = document.querySelector('#map-container .modal-backdrop');
  if (backdrop) backdrop.remove();
});

针对Bootstrap 4/3

1. 通过JavaScript初始化Modal时指定container选项：

$('#your-modal-id').modal({
  container: '#map-container'
});

2. 监听Modal事件移动遮罩层：

$('#your-modal-id').on('show.bs.modal', () => {
  setTimeout(() => {
    $('.modal-backdrop').appendTo('#map-container');
  }, 10);
});

$('#your-modal-id').on('hidden.bs.modal', () => {
  $('#map-container .modal-backdrop').remove();
});

方法2：修改Bootstrap源码（不推荐） #

直接修改Bootstrap生成遮罩层的代码，将遮罩层的父元素指定为#map-container。但此方法会导致Bootstrap版本升级时需要重新修改代码，维护成本高，仅在特殊场景下使用。

可选样式调整 #

如果移动后遮罩层层级或显示仍有问题，添加以下CSS确保遮罩层覆盖整个地图容器且层级正确：

#map-container .modal-backdrop {
  z-index: 1050; /* 与Bootstrap默认遮罩层z-index保持一致 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

注：全屏模式下#map-container会被浏览器设置为position: fixed，内部绝对定位的遮罩层会自动覆盖整个容器。

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