[英]How to set z-index when clicked with dialog overlays (PrimeNG)?
Currently I am using dialogs from PrimeNG like this:目前我正在使用来自 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>
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
.当前行为是最后打开的对话框是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.我的意思是,当我在对话框中单击时,我想将z-index
设置为最高,以便在所有人面前显示它。 Any idea?任何的想法?
One solution to the above problem is:上述问题的一种解决方案是:
1) Use tag to each p-dialog
and call moveOnTop
on (click)
like below: 1) 对每个p-dialog
使用 tag 并在(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.