Position a jQuery UI Dialog
The Dialog widget's position option uses jQuery UI Position. Define which point on the dialog (my) should align with which point on the target (at), and choose the target with of.
| Property | Purpose |
|---|---|
my | The point on the dialog to align, such as left top, center, or right bottom. |
at | The point on the target to align with. |
of | The target: commonly window, a DOM element, or a jQuery object. |
Position a Dialog at the Top Right Top ↑
$( "#my_dialog" ).dialog({
autoOpen: false,
position: {
my: "right top",
at: "right top",
of: window
}
});
Demo: Dialog at the top-right corner →
my describes the dialog's alignment point; at describes the target's alignment point. Position strings use horizontal then vertical alignment.
Change Position after Initialization Top ↑
$( "#my_dialog" ).dialog(
"option",
"position",
{
my: "right top",
at: "right top",
of: window
}
);
Demo: move the Dialog among corners and center →
The same pattern can position the dialog relative to a button or another target by changing of.
Add an Offset Top ↑
Offsets are appended to the my or at coordinates. For example, this places the dialog 20 pixels inward from the target's top-right point:
$( "#my_dialog" ).dialog({
position: {
my: "right-20 top+20",
at: "right top",
of: window
}
});
Demo: Dialog position with an offset →
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
