Positioning JQuery UI Dialog near clicked link

Question

Hi all,

I have the following jquery function for some links

$(".clickable").click(function(event){
     // load dialog content...
     $("#dialog").dialog();
     return false;
   });

What i'd like to do is have JQuery's UI dialog display near the clicked link. Is there any way to do this using just JQuery.

Thanks!

Answer 1

You could use the event.clientX and event.clientY properties, to get the coordinates where the click event was fired, and move the dialog to them:

$(".clickable").click(function (e) {
  // open and move the dialog
  $("#dialog").dialog('open').dialog('option', 'position',[e.clientX,e.clientY]);
  return false;
});

Check the above example here.