How to make a pop-up (modal) show up right where you clicked on?

Question

I'm working with a modal and I was wondering if anyone knows how to make it show up right where you clicked on and NOT in the middle of the page ? Basically, if you click on any row of my table you will get a pop-up in the middle of the page, but I want it to show up right where you clicked on.

By default it appends it to the body (middle):

 appendTo = "body"

Here's my code: PLUNKER

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

I also don't want MODAL to go over window when a row is close to the bottom of the window. Please see attached picture:

Answer 1

Use positionLeft and positionTop to display your modal where you want.

From the doc :

positionLeft : Left coordinate value of the dialog.

positionTop : Top coordinate value of the dialog.

---

You just need to tell the coordinates of your cursor when you click on a row. p-dialog HTML becomes :

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

And onRowSelect method :

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

See working Plunker