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 the top of the page. Is there an easy way to do this? It looks like there are just a couple pre-defined values or I can use an exact position but is there an easy way to accomplish this?

 $("#dialog-form").dialog({
                autoOpen: false,
                width: 630,
                position: 'center',
                modal: true,
                resizable: false,
                closeOnEscape: false

            });

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

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

Answer 4

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 5

Try this:

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

Answer 6

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

Worked for me.

Answer 7

If anyone is creating a link that opens a jQuery dialog due to the link's class having a click event handler, you may notice that it might jump to the top of the page but create the modal dialog deeper down the page and you have to scroll to it.

If anyone is just trying to stop the jQuery dialog from jumping to the top, wanting it to stay near the link you clicked, just remove href. Nearly went mad trying to solve this. The HTML5 specification apparently understands href="" or href="#" to mean move to the top.

Answer 8

apply css into your #dialog-form use % sample

if width = 1000

put

left:50% margin-left:-500px;

to make it centered. or you can use iframe.