使用确认对话框时如何隐藏叠加并在PrimeNG中设置其位置?

时间:2018-01-10 17:03:07

标签: css angular typescript primeng

我正在使用对话框窗口确认对话框。当我第一次看到对话框窗口时,叠加层会显示(这是预期的),但是当我点击打开的图表按钮时,我会看到确认对话框,但它的叠加层已经全部结束(这意味着我可以&# 39;在页面上做任何事情),所以我的问题是:

1)如何隐藏 确认对话框的叠加层,以便我可以点击是或否按钮?

2)如何设置确认对话框的位置?我一直在使用 positionTop positionLet 作为对话,它运行得很好!但我无法使用确认对话框。我只想让确认对话框通过对话框窗口。

注意:要查看“对话框”窗口,只需点击我表格中的任意一行。

这是我的工作代码: 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>

1 个答案:

答案 0 :(得分:2)

这对我有用......我将p-confirmDialog移到p对话框之外

<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>