jQuery Dialog positioning

Question

I am using jQuery UI to display a dialog but I would like to reposition the window exactly under the button when it opens.

Can someone help me with that?

The code:

http://jsfiddle.net/ntenisOT/vJNRj/3/

Answer 1

You can use offset() and outerHeight() to compute the appropriate coordinates, and the position option to reposition the dialog widget:

var $opener = $("#opener");
var offset = $opener.offset();
$("#dialog").dialog("option", "position",
    [offset.left, offset.top + $opener.outerHeight()]);

Updated fiddle here.

EDIT: Using the same button to close the dialog involves checking its status in your click handler:

$opener.click(function() {
    var $dialog = $("#dialog");
    var verb = $dialog.dialog("isOpen") ? "close" : "open";
    $dialog.dialog(verb);
    return false;
});

Updated fiddle there.