React项目弹窗渲染异常：Event侧弹窗未灰化Resource面板

问题详情 #

我们的学校项目React应用出现视觉bug：

• Resource侧删除警告弹窗弹出时，界面遮罩正常，所有面板都会被灰化
• Event侧删除警告弹窗弹出时，仅Event面板被灰化，Resource面板无任何遮罩效果，仍正常显示
• 所有弹窗功能逻辑均正常，仅存在该视觉问题
• 已尝试调整各面板渲染顺序，当前index.js中的顺序为测试后最优，但问题仍未解决

排查与解决方向 #

1. 检查遮罩层的DOM层级与样式 #

• 核心问题大概率是Event弹窗的遮罩层被嵌套在Event面板内部，导致其层级只能覆盖当前面板，无法影响外部的Resource面板
• 解决方式：将全局遮罩层放到所有面板的外层（比如根组件最顶部），确保样式为全屏覆盖：

  .global-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999; /* 确保层级高于所有面板 */
  }
  

2. 统一弹窗遮罩的实现逻辑 #

• 确认Event弹窗与Resource弹窗是否使用同一套遮罩组件：若为两套独立实现，可能Event侧的遮罩未做全局覆盖处理
• 解决方式：复用同一个全局遮罩组件，弹窗内容挂载在遮罩层内部，确保每次弹窗触发时，遮罩都是全局生效的

3. 排查CSS作用域限制 #

• 若使用CSS Modules或CSS-in-JS的作用域隔离，Event遮罩的样式可能被限制在Event面板的作用域内，无法渗透到外部组件
• 解决方式：将遮罩层样式设置为全局作用域，比如在CSS Modules中用:global()包裹：

  :global(.global-modal-overlay) {
    /* 全局遮罩样式 */
  }
  

4. 用开发者工具定位DOM结构 #

• 弹出两种弹窗时，打开浏览器Elements面板，对比两者遮罩层的DOM位置：
  • Resource弹窗的遮罩层应在根节点下，而非Resource面板子节点
  • 若Event弹窗的遮罩在Event面板内部，直接调整其渲染位置即可

快速验证方法：手动在根节点下添加一个临时遮罩元素，看是否能覆盖Resource面板，以此确认层级问题

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