Materialize Modal打开后下层内容穿透可见问题排查求助

问题根因 #

你遇到的模态框内容穿透问题，核心原因是你把Modal组件嵌套在了带waves-effect属性的<div class="card-image">元素内部。带有waves-effect的元素会被Materialize自动添加transform属性，该属性会创建独立的层叠上下文，导致嵌套在内部的Modal无法突破父元素的层级限制，而Materialize默认插入到body末尾的遮罩层（.lean-overlay）层级低于页面其他卡片元素，最终出现下层内容穿透显示的问题。

可行解决方案 #

方案1：调整DOM结构（最推荐） #

直接把Modal的代码从card内部移到页面外层，最好放在</body>标签之前，和其他顶层元素同级即可，调整后的代码结构参考：

<!-- 原有所有卡片代码 -->
<div class="card">
  <div class="card-image waves-effect waves-block waves-light">
    <!-- 原有卡片内容、Modal触发按钮 -->
    <a class="waves-effect waves-light btn blue darken-1 modal-trigger" href="#modal">Launch Temperature History</a>
  </div>
</div>

<!-- 把Modal移到所有卡片外面 -->
<div id="modal" class="modal">
  <div class="modal-content">
    <div class="card graphcolour">
      <div class="card graphcontent">
        <canvas id=1></canvas>
      </div>
    </div>
    "hello there!"
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-red btn red lighten-1">Close</a>
  </div>
</div>

这个方案不需要修改任何CSS和JS逻辑，完全符合Materialize官方的组件使用规范，不会产生其他兼容问题。

方案2：强制修改层级配置（不想调整DOM时使用） #

如果受现有业务逻辑限制不方便调整DOM结构，可以直接在全局CSS中添加以下配置，强制提升遮罩层和Modal的层级：

/* 调整遮罩层不透明度和层级，数值可根据自己的页面情况调整 */
.lean-overlay {
  z-index: 1000 !important;
  opacity: 0.6 !important;
}
/* 确保Modal层级始终高于遮罩层 */
.modal {
  z-index: 1001 !important;
}

你之前尝试的遮罩层方案无效，就是因为没有解决层叠上下文的层级限制问题，强制指定全局层级即可解决。

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