How to set the "Confirm dialog on dialog" dialog box?

Question

I am trying to position the confirmation dialog directly above the dialog box , but cannot make it work. To put my dialog box based on user click, I use positionTop and positionLeft , but they do not work when working with Confirm Dialog. My question is how to show / move the Confirm dialog in the middle of the dialog box and NOT in the middle of the page?

NOTE:

• I use PrimeNG for my dialogs.
• Just click on any line to see my dialog box, and then click "Open" to see "Confirm dialog."

Here is my code:

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

Taking into account positionLeftConfirmationand positionTopConfirmationcoordinates a confirmation dialog box's upper left corner. If you want this confirmation dialog to be centered inside the parent, its left coordinate will be:

positionLeftConfirmation = positionLeft (parent dialog) + parentDialogWidth / 2 - dialogWidth / 2.

In your case parentDialogWidth = 350 and dialogWidth = 330, so

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

Similarly

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

See working plunker