Angular 8全屏模式下Mat-Dialog弹窗不显示问题求助

我之前在做Angular项目时也碰到过一模一样的问题——全屏状态下点击按钮调用Mat Dialog没反应，退出全屏后弹窗才突然冒出来。结合你的代码细节来看，问题的核心原因很明确：全屏元素的渲染层级遮挡了Mat Dialog。

问题根源分析 #

当你通过requestFullscreen()把viewArea设为全屏元素时，浏览器会把这个元素放到一个独立的全屏渲染上下文里，这个上下文的层级会远高于普通DOM元素（包括挂载在document.body下的Mat Dialog）。你的弹窗其实已经成功创建了，但它被全屏的viewArea完全挡住，所以视觉上看不到任何反应，直到退出全屏后，这个遮挡才消失。

解决方案 #

针对这个问题，有几个可靠的解决思路，按推荐程度排序：

1. 将Mat Dialog挂载到全屏元素内部

Angular Material的MatDialogConfig提供了appendTo选项，可以指定弹窗挂载的目标元素。把Dialog挂载到viewArea内部，就能让它处于和全屏元素相同的渲染上下文，避免被遮挡。

修改你的openDialogNuance()方法：

// 先确保组件中注入了必要的依赖
import { MatDialog } from '@angular/material/dialog';

openDialogNuance() {
  // 获取全屏的viewArea元素
  const viewAreaElem = document.getElementById('viewArea');
  
  this.dialog.open(NuanceComponent, {
    panelClass: 'mat-dialog',
    appendTo: viewAreaElem // 指定弹窗挂载到viewArea内部
  })
  .afterClosed()
  .subscribe(result => {
    this.indexeDbService.nuanceAdd(result);
  });
}

2. 切换全屏目标为document.body

如果业务允许，你可以把全屏的目标从viewArea改成整个body，这样Mat Dialog依然在body下，不会被全屏元素遮挡：

fullScreen(){
  this.myService.fullScreenStatus = true;
  let elem = document.body; // 改为body
  this.openFullscreen(elem);
  const viewArea = document.getElementById('viewArea');
  viewArea.classList.add('noScrollBars');
  viewArea.style.zoom = "85%" ;
}

3. 强制提升Dialog的z-index（不推荐）

你可以尝试给Dialog的面板类设置极高的z-index，不过这种方式不够可靠——因为浏览器对全屏元素的层级处理比较特殊，有时候即使z-index设得很高也无法突破全屏上下文的限制。如果前两种方案都不适用，可以试试在全局样式中添加：

.mat-dialog {
  z-index: 999999 !important;
}

验证方法 #

你可以在全屏状态下打开浏览器开发者工具，查看Mat Dialog的DOM元素是否存在。如果能找到<div class="mat-dialog-container">相关节点，就说明弹窗已经创建，只是被遮挡了，这时候用方案一就能快速解决问题。

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