jqueryui对话框定位 [英] jqueryui dialog positioning

问题描述

我使用的是JQuery UI，并希望将对话框设置为水平居中，但垂直位于中心上方，可能是固定的像素数或距离页面顶部的相对距离。有没有一个简单的方法来做到这一点？看起来像只有几个预定义的值，或者我可以使用一个确切的位置，但有一个简单的方法来完成这一点？

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

            });

推荐答案

使用 position选项将对话框的顶部与窗口顶部对齐（加上像素或百分比偏移量）。

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

这应该使对话框水平居中，并将其从顶部定位150个像素。

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

旧版本的jQuery UI使用包含[x，y]坐标对的数组左侧，视口的顶角（例如[350,100]）。

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

这篇关于jqueryui对话框定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！