单击对话框覆盖(PrimeNG)时如何设置 z-index?
How to set z-index when clicked with dialog overlays (PrimeNG)?
目前我正在使用 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
设置为最高,以便将其显示在所有人面前。有什么想法吗?
上述问题的一种解决方案是:
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>
目前我正在使用 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
设置为最高,以便将其显示在所有人面前。有什么想法吗?
上述问题的一种解决方案是:
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>