css - 使用确认对话框时如何隐藏覆盖并在 PrimeNG 中设置其位置？

Question

我正在使用对话窗口和确认对话框。当我第一次获得对话框窗口时，会显示叠加层(这是预期的)，但是当我单击 OPEN CHART 按钮时，我会看到“确认”对话框，但它的叠加层已全部结束(这意味着我可以'不再在页面上做任何事情)，所以我的问题是:

1) 如何隐藏确认对话框的覆盖层以便我可以点击是或否按钮？

2) 如何设置确认对话框的位置？我一直在为对话框使用 positionTop 和 positionLet 并且效果很好!但我无法让它与 Confirm Dialog 一起工作。我只是想让确认对话框覆盖对话框窗口。

注意:要查看对话窗口，只需单击我表格的任意行。

这是我的工作代码: PLUNKER

<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="330"></p-confirmDialog>

<button type="text" (click)="confirm()" pButton icon="fa-check" label="OPEN CHART"></button>

Answer 1

这对我有用...我将 p-confirmDialog 移到了 p-dialog 之外

<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 CHART"></button>
</p-dialog>
     <p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="330"></p-confirmDialog>

<p-dataTable [value]="data" resizableColumns="true" selectionMode="single" (onRowSelect)="onRowSelect($event)">
  <p-column field="status" header="Name" [sortable]="true"></p-column>
  <p-column field="name" header="Email" [sortable]="true"></p-column>
</p-dataTable>