jqueryui dialog positioning

Question

I am using JQuery UI and would like to position my dialog horizontally centered but vertically above center, maybe by a fixed amount of pixels or a relative distance from th

Answer 1

Use the position option to align the top of the dialog with the top of the window (plus a pixel or percent offset).

This should center the dialog horizontally and position it 150 pixels from the top.

$("#dialog-form").dialog({
    autoOpen: false,
    width: 630,
    position: { my: 'top', at: 'top+150' },
    modal: true,
    resizable: false,
    closeOnEscape: false
});

Older versions of jQuery UI used an array containing an [x,y] coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100]).

var dialogWidth = 630;
$("#dialog-form").dialog({
    // ...
    width: dialogWidth,
    position: [($(window).width() / 2) - (dialogWidth / 2), 150],
    // ...
});

Answer 2

This worked for me

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

Also you can check dialog positions here
Find Position

Answer 3

position: { 
   my: 'top', 
   at: 'top+150' 
}

Worked for me.

Answer 4

Try this:

    position: {
        my: 'top',
        at: 'top',
        of: $('#some-div')
    },

Answer 5

I adjusted Exlord's answer to fit.

position: ['center-7%', 'center-12%']

This adjusts horizontally and vertically

$(".popup").dialog({    
position: ['center-7%', 'center-12%'],
title: 'Updating',
    width: "auto",
}
});

Answer 6

i came across this while searching for the same question bu i already had my answer :

position: ['center', 'top+100']

this will center horizontally and 100 pixel from top

this works also

position: ['center', 'center+100']

center horizontally and 100 pixel from below center