jqueryui dialog positioning

问题

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

            });

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

回答2:

This worked for me

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

Also you can check dialog positions here
Find Position

回答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

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

回答5:

Try this:

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

回答6:

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

Worked for me.

回答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.