Positioning the jQuery modal dialog

Question

I'm using jQuery modal form dialog to prompt user for few quick option selections. Basically, it's a table listing all users and one of the columns has two links:

1. to initiate Archiving all user files
2. to initiate Archiving only files uploaded since last archive.

Whatever the link user clicks a modal form dialog appears asking user about including only original files or original+small thumbnails or original+small+large thumbnails.

Everything works fine except that the dialog loads at the bottom of the page thus spoiling the user experience. Basically, I would like the dialog to appear closer to the row on which user clicked. Dialog is opened from the click event, btw. Any insights?

Dialog is loaded with the following options:

autoOpen: false,
  height: 200,
  width: 400,
  modal: true

Answer 1

Please refer to the API documentation to adjust the position of the dialog based on your needs:

http://api.jqueryui.com/dialog/#option-position

The default parameters are:

{ my: "center", at: "center", of: window }

Example usage:

 $( ".selector" ).dialog({ position: { my: "left top", at: "left bottom", of: button } });

For more precise positioning, please refer to this page.

$( "#position3" ).position({
  my: "right center",
  at: "right bottom",
  of: "#targetElement"
});