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

            });

Rampart

Have you tried ['center', 'top']? – Nissa

That makes the dialog appear in the center horizontally but at the top of the page (assuming I didn't do this incorrectly). I want to position the dialog above center by a bit. – Rampart

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],
    // ...
});

Premillenarian

It should be noted that the array method has since been deprecated. Use an object instead. – Vinasse

updated to use the position object (for newer versions of jQuery UI) – Premillenarian

Note, you have control of the x,y of both objects. position: { my: "center top", at: "center top", of: window }, – Moravian

Answer 2

This worked for me

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

Also you can check dialog positions here
Find Position

Diamagnet

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

Romona

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",
}
});

Cainozoic

Answer 5

Try this:

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

Reproof

Answer 6

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

Worked for me.

Bawdy

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.

Wurth

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.

Politick