如何使弹出窗口（模态）显示在您单击的位置？

Question

我正在使用模态，我想知道是否有人知道如何让它显示在你点击的地方，而不是在页面的中间？基本上，如果你点击我表格的任何一行，你会在页面中间弹出一个弹出窗口，但是我希望它显示在你点击的位置。

默认情况下，它将它附加到正文（中间）：

 appendTo = "body"

这是我的代码：PLUNKER

<p-dialog appendTo = "body" header="Title" [(visible)]="display" modal="modal" width="350" height="300">
 {{personData}}
</p-dialog>

当一行接近窗口底部时，我也不希望MODAL遍历窗口。请看附图：

Answer 1

使用positionLeft和positionTop在您想要的位置显示您的模态。

来自doc：

positionLeft：对话框的左坐标值。

positionTop：对话框的顶部坐标值。

---

您只需要在单击行时告诉光标的坐标。 p-dialog HTML成为：

<p-dialog appendTo = "body" header="Title" [(visible)]="display" modal="modal" width="350" height="300" positionLeft="{{positionLeft}}" positionTop="{{positionTop}}">
  {{personData}}
</p-dialog>

和onRowSelect方法：

onRowSelect(event) {
    this.positionLeft = event.originalEvent.clientX;
    this.positionTop = event.originalEvent.clientY;
    this.display = true;
    this.personData = event.data.name;
}

见工作Plunker