Position Dialog Based On Click Event

Positions the dialog widget based on the coordinates of the click event.

HTML

<a class="opener left" href="#">Open Dialog</a>
<a class="opener right" href="#">Open Dialog</a>
<div id="dialog" title="Some Dialog">Foo</div>

CSS

body {
    font-size: 0.8em;
}

.left {
    float: left;
}

.right {
    float: right;
}

JavaScript

// Don't open the dialog by default, just create it.
$( "#dialog" ).dialog({
    autoOpen: false 
});

// Listen to click events.
$( ".opener" ).on( "click", function( e ) {
    
    // Set the position of the dialog, using the event coordiantes,
    // before opening it. This opens the dialog "near" the click.
    $( "#dialog" ).dialog( "option", "position", [ e.pageX, e.pageY ] )
                  .dialog( "open" );    

});

$.onclick(function( e ) {
    
    // Set the position of the dialog, using the event coordiantes,
    // before opening it. This opens the dialog "near" the click.
    $( "#dialog" ).dialog( "option", "position", [ e.pageX, e.pageY ] )
                  .dialog( "open" );    

});