如何在对话窗口上定位确认对话框？

Question

我正在尝试将确认对话框放在对话框窗口上，但无法使其正常工作。为了根据用户的点击定位我的对话窗口，我使用 positionTop 和 positionLeft ，但这些在使用确认对话框时似乎不起作用。我的问题是如何在页面中间的对话框窗口和 NOT 中间显示/移动确认对话框？

注意：

• 我正在使用PrimeNG作为我的Dialogs。
• 只需点击任意一行即可查看我的对话窗口，然后点击打开以查看确认对话框。

这是我的代码：

PLUNKER

<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="330"></p-confirmDialog>
<p-dialog appendTo = "body" header="Title" [(visible)]="display" modal="modal" width="350" height="300" positionLeft="{{positionLeft}}" positionTop="
{{positionTop}}">
{{personData}}
<button type="text" (click)="confirm()" pButton icon="fa-check" label="OPEN"></button>
</p-dialog>

Answer 1

给定positionLeftConfirmation和positionTopConfirmation左上方的确认对话框坐标。如果希望此确认对话框在父对象内居中，则其左坐标将为：

  

positionLeftConfirmation = positionLeft（父对话框）+ parentDialogWidth / 2 - dialogWidth / 2.

在您的情况下，parentDialogWidth = 350和dialogWidth = 330 so

this.positionLeftConfirmation = this.positionLeft + (350-330)/2;

类似地，

this.positionTopConfirmation = this.positionTop + (300-200)/2;

见工作Plunker