CoreUI默认Header内Modal显示在遮罩层后方问题求助

核心原因 #

Header组件的DOM层级与z-index上下文限制了内部Modal的层级，导致Modal被全局遮罩层覆盖；而主容器内的Modal默认挂载在全局层级，因此不受影响。

解决方案1（推荐）：修改Modal的挂载容器 #

将Modal挂载到document.body，脱离Header的DOM层级限制，让它和主容器内的Modal使用相同的全局层级：

import { CModal, CModalHeader, CModalTitle, CModalBody, CModalFooter } from '@coreui/react';

// Header组件内的Modal配置
<CModal container={document.body} visible={modalVisible} onClose={() => setModalVisible(false)}>
  <CModalHeader>
    <CModalTitle>示例模态框</CModalTitle>
  </CModalHeader>
  <CModalBody>
    这是Header内的模态框，现在可正常显示在遮罩层上方
  </CModalBody>
  <CModalFooter>
    <button className="btn btn-secondary" onClick={() => setModalVisible(false)}>关闭</button>
  </CModalFooter>
</CModal>

解决方案2：单独调整Modal的z-index #

若无法修改挂载容器，可给Header内的Modal设置更高的z-index，确保超过遮罩层默认值（CoreUI遮罩层默认z-index为1050，Modal为1051）：

1. 给Modal添加自定义类名：

<CModal className="header-modal" visible={modalVisible} onClose={() => setModalVisible(false)}>
  {/* 模态框内容 */}
</CModal>

2. 在样式文件中添加：

.header-modal {
  z-index: 1060 !important;
}

注意：该方法可能与其他全局样式冲突，优先使用方案1。

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