angular - 单击对话框覆盖(PrimeNG)时如何设置 z-index？

Question

目前我正在使用 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 设置为最高，以便将其显示在所有人面前。有什么想法吗？

Answer 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>