dialog position near click

by narensrinivasans

HTML

<a href="#" style="font-size: 2em;">Click here</a>

<div id="dialog" title="jQuery UI Dialog" style="display:none">
            <p>positioned relative to mousemove event, using the position utility</p>
<code><pre>.dialog({
  position: {
    my: 'left',
    at: 'right',
    of: event
  }
});</pre></code>
  </div>

JavaScript

$("#dialog").dialog({
  autoOpen: false,
  draggable: false,
  resizable: false,
  width: 500
});

$("a").click(function(elem) {
  $("#dialog").dialog("open");
  $("#dialog").dialog("option", "position", {
    my: "left top",
    at: "right bottom",
    of: elem,
    offset: "20 20"
  });
});