jqueryui对话框定位

Question

我正在使用 JQuery UI，我想将我的对话框水平居中但垂直居中放置，可能是固定数量的像素或与页面顶部的相对距离。是否有捷径可寻？看起来只有几个预定义的值，或者我可以使用一个确切的位置，但是有没有一种简单的方法可以做到这一点？

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

            });

Answer 1

使用 position option将对话框的顶部与窗口的顶部对齐(加上一个像素或百分比偏移量)。

这应该使对话框水平居中并将其放置在距顶部 150 像素的位置。

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

旧版本的 jQuery UI 使用了一个数组，其中包含一个 [x,y] 坐标对，像素偏移距视口(viewport)左上角(例如 [350,100])。

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