How to set z-index when clicked with dialog overlays (PrimeNG)?

Question

Currently I am using dialogs from PrimeNG like this:

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

And I use buttons to open them like below:

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

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

Current behavior is that the last opened dialog is the one with the biggest z-index. The problem here is that I cannot find a way to show the dialog when I click on it. What I mean is that I want to set z-index to be the highest when I click in the dialog in order to get it in front of all. Any idea?

if multiple elements have same z-index the order they are placed inside parent will matter last one will be drawn on top so you can use some focus manager that will increase z-index of one of windows +1 when its clicked and back to default if something else its clicked — Xesenix, Jun 19 '19 at 08:53
@Xesenix each dialog has different z-index. Each time I open a dialog z-index is increasing. — TheodoreTsg, Jun 19 '19 at 08:55
in source code https://github.com/primefaces/primeng/blob/27f306a6118a4b8f183b2d8480af0cd9235f097a/src/app/components/dialog/dialog.ts i see there s option for `[autoZIndex]="false"` searching further if there is something that would enable focusing — Xesenix, Jun 19 '19 at 09:15
and found `moveOnTop` now you just need to connect that to onclick, note that this does require turning of `[autoZIndex]=true` — Xesenix, Jun 19 '19 at 09:16
Thank you @Xesenix I found the solution I will post it! thanks again! — TheodoreTsg, Jun 19 '19 at 09:27

score 4 · Accepted Answer · answered Jun 19 '19 at 09:31

One solution to the above problem is:

1) Use tag to each p-dialog and call moveOnTop on (click) like below:

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

How to set z-index when clicked with dialog overlays (PrimeNG)?

1 Answers1