主站集成模态框遇Z-Index层级优先级及滚动性问题

1. Z-Index优先级被遮挡问题 #

这种情况大概率是堆叠上下文冲突导致的，不是单纯调z-index就能解决，按以下步骤排查：

• 把模态框直接移到<body>标签下，不要嵌套在主站任何带position: relative/absolute/fixed且设置了z-index的父容器里——父元素的堆叠上下文会锁死模态框的层级，再高的z-index也无法突破。
• 强制覆盖层级，给模态框核心类加以下样式（覆盖原有设置）：

  .modal {
    position: fixed !important;
    z-index: 9999 !important;
  }
  .modal-backdrop {
    z-index: 9998 !important;
  }
  .modal-content {
    z-index: 10000 !important;
  }
  

• 用浏览器F12工具选中遮挡模态框的元素，查看它的z-index和所属堆叠上下文，如果是主站某个固定导航/弹窗的z-index过高，直接调低该元素的z-index值。

2. 模态框内容无法滚动问题 #

高度计算或父容器溢出设置错误是主要原因，按以下方法调整：

• 先确保.modal没有设置overflow: hidden，改成：

  .modal {
    overflow: visible !important;
  }
  

• 重新设置模态框内容区的高度和滚动属性：

  .modal-content {
    max-height: 90vh;
    overflow: hidden; /* 防止内容溢出容器 */
  }
  .modal-body {
    max-height: calc(90vh - 140px); /* 减去header和footer的高度，根据实际布局调整数值 */
    overflow-y: auto;
  }
  

• 如果还是不行，给.modal-dialog加滚动兜底：

  .modal-dialog {
    max-height: 90vh;
    overflow-y: auto;
  }
  

内容的提问来源于stack exchange，提问作者wisdom Ng'oma