It’s easy (once you know how) to invoke a jQuery-UI dialog in Meteor:
-
In the console, enter “meteor add linto:jquery-ui” to install the package
-
Add (if you don’t already have it) a “hide” CSS class:
.hide {
visibility: hidden;
display: none;
} -
Add some HTML to the Template where the Dialog should display, hiding it by default, such as:
Post-Travel Bottom
This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
-
In response to some event, unhide the div and call dialog() on it, such as:
‘click #imgPostTravelBottom’: function() {
$( “#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?