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?

Vyky

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

@Shockley each dialog has different z-index. Each time I open a dialog z-index is increasing. – Vyky

in source code github.com/primefaces/primeng/blob/… i see there s option for [autoZIndex]="false" searching further if there is something that would enable focusing – Shockley

and found moveOnTop now you just need to connect that to onclick, note that this does require turning of [autoZIndex]=true – Shockley

Thank you @Shockley I found the solution I will post it! thanks again! – Vyky

Answer 1

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>

Vyky