How can I control where a jquery-ui Dialog displays? - jquery-ui

Question

Here's what I'm doing:
1) Add a "hide" CSS class:
.hide {
visibility: hidden;
display: none;
}
2) Add some HTML to where the Dialog should display, hiding it by default, such as:
<div class="hide" id="postTSec4" name="postTSec4">
<h2>Post-Travel Bottom</h2>
<img id="imgPostTravelBottom" name="imgPostTravelBottom" src="images/4_PTE_Bottom_Jig.png" alt="post Travel image" height="275" width="350">
</div>
<div class="hide" id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
3) In response to some event, unhide the div and call dialog() on it, such as:
$( "#dialog" ).removeClass('hide');
$( "#dialog" ).dialog();
The problem is that this causes the dialog to display in the middle of the page; I want the dialog to display with its NW corner at the tip of the cursor/pointer/finger.
So how can I control where the dialog appears?
UPDATE
I used the linked-to, supposedly-the-answer code as a basis, but no, it doesn't quite work in my situation.
UPDATE 2
With this code (adapted from meteorBuzz's answer):
CSS
.outer {
width: 100%;
height: 700px;
border: 2px green solid;
padding: 10px;
}
#dialog {
height: 100px;
max-width: 100px;
border: 3px black solid;
padding: 5px;
z-index: 100;
}
HTML:
<template name="postTravelSection5">
<div class="outer hide" id="postTSec5" name="postTSec5">
<div id="dialog" name="dialog" title="Basic dialog">
<p>This is dialog content area...</p>
</div>
</div>
</template>
JavaScript:
Template.postTravelSection5.events({
'click #postTSec5': function(event) {
var x = event.pageX;
var y = event.pageY;
$("#dialog")
.offset({
'left': x,
'top': y
});
}
});
Template.postTravel.events({
'click #imgPostTravel': function() {
. . .
$('#postTSec5').removeClass('hide');
}
});
("outer" and "dialog" are seen after "imgPostTravel" is clicked).
...it does not work; I see the two divs (the outer one with the green border, and the div dialog within it), but clicking does nothing.

Answer 1

You can have full control of the div behaviour by simply creating your own behaviour model instead of using jquery-ui for this particular matter.
Also, you can make the dialog look unique instead of having to over-ride jquery-ui default styling and positioning.
You may move the div to where the click event took place in two steps:
Capture x/y coordinates of the click event
Set these values to the styling of the div using javascript.
Notice, I've created an #outer div that spans most of the web page to allow the #dialog div to move within such a space.
HTML
<template name="postTravelSection4">
<div class="outer">
<div id="dialog" title="Basic dialog">
<p>This is dialog content area...</p>
</div>
</div>
</template>
JS
Template.postTravelSection4.events({
'click': function(event) { // you may add which element fires this function when you click it.
var x = event.pageX; // x coordinates
var y = event.pageY; // y coordinates
$( "#dialog" )
.offset({
'left': x,
'top': y
});
}
});
}
CSS
.outer {
width: 100%;
height: 700px;
border: 2px green solid;
padding: 10px;
}
#dialog {
height: 100px;
max-width: 100px;
border: 3px black solid;
padding: 5px;
z-index: 100; // incase of overlaps of divs, this one will remain on top
}
// create your hide/show classes to display and remove the div from display in the way you wish