单击对话框覆盖（PrimeNG）时如何设置z-index？答案

【问题标题】：How to set z-index when clicked with dialog overlays (PrimeNG)?单击对话框覆盖（PrimeNG）时如何设置z-index？
【发布时间】：2019-06-19 08:48:51
【问题描述】：

目前我正在使用来自 PrimeNG 的对话框，如下所示：

<button type="button" class="button button-3 button-3a" 
   (click)="openCloseFront()"><iclass="fa fa-eye"></i>View Image 
</button>
<button type="button" class="button button-3 button-3a" 
   (click)="openCloseBack()"><iclass="fa fa-eye"></i>View Image 
</button>
<p-dialog [(visible)]="frontOpened" header="ID Front Side" 
          [responsive]="true"
          [style]="{width: '350px', minWidth: '200px'}" 
          [minY]="70" [maximizable]="true" 
          [baseZIndex]="10000">
  /* code here with img*/
</p-dialog>
<p-dialog [(visible)]="backOpened" header="ID Back Side" 
          [responsive]="true"
          [style]="{width: '350px', minWidth: '200px'}" 
          [minY]="70" [maximizable]="true" 
          [baseZIndex]="10000">
  /* code here with img*/
</p-dialog>

我使用按钮打开它们，如下所示：

public openCloseFront() {
   this.frontOpened = !this.frontOpened;
}

public openCloseBack() {
   this.backOpened = !this.backOpened;
}

当前行为是最后打开的对话框是具有最大z-index 的对话框。这里的问题是当我单击它时找不到显示对话框的方法。我的意思是，当我单击对话框时，我想将z-index 设置为最高，以便将它放在所有人面前。有什么想法吗？

【问题讨论】：

如果多个元素具有相同的 z-index，那么它们放置在 parent 中的顺序将很重要，最后一个将被绘制在顶部，因此您可以使用一些焦点管理器来增加其中一个窗口的 z-index + 1 当它被点击并返回默认值，如果它点击了其他东西
@Xesenix 每个对话框都有不同的 z-index。每次我打开一个对话框时，z-index 都会增加。
在源代码github.com/primefaces/primeng/blob/… 中我看到[autoZIndex]="false" 有一个选项，如果有什么可以实现聚焦，请进一步搜索
并找到moveOnTop 现在只需将其连接到onclick，请注意这确实需要打开[autoZIndex]=true
谢谢@Xesenix 我找到了我会发布的解决方案！再次感谢！

标签： angular primeng primeng-dialog

【解决方案1】：

上述问题的一种解决方法是：

1) 对每个p-dialog 使用标签并在(click) 上调用moveOnTop，如下所示：

<p-dialog #pdFront [(visible)]="frontOpened" header="ID Front Side" 
      [responsive]="true"
      [style]="{width: '350px', minWidth: '200px'}" 
      [minY]="70" [maximizable]="true" 
      [baseZIndex]="10000" (click)="pdFront.moveOnTop()">
 /* code here with img*/
</p-dialog>
<p-dialog #pdBack [(visible)]="backOpened" header="ID Back Side" 
      [responsive]="true"
      [style]="{width: '350px', minWidth: '200px'}" 
      [minY]="70" [maximizable]="true" 
      [baseZIndex]="10000" (click)="pdBack.moveOnTop()">
  /* code here with img*/
</p-dialog>

【讨论】：