jQueryUI对话框定位

Question

我正在使用JQuery UI，并希望将我的对话框水平居中，但垂直于页面中心之上，可以固定像素量或与页面顶部的相对距离。有没有简单的方法来实现这一点？看起来只有几个预定义的值或者我可以使用精确的位置，但是是否有一种简单的方法来完成这个目标呢？

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

            });

- Joe Cartano

---

你尝试过['center', 'top']吗？ - Andrew Whitaker

这将使对话框在水平中心出现，但位于页面顶部（假设我没有做错）。我想将对话框稍微向上定位。 - Joe Cartano

Answer 1

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

这应该在水平方向上居中对话框，并将其定位在距顶部150像素的位置。

$("#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])。

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

- Alpha Codemonkey

---

需要注意的是，数组方法已被弃用。请使用对象替代。 - JasCav

已更新为使用 position 对象（适用于较新版本的 jQuery UI）。 - Alpha Codemonkey

注意，您可以控制两个对象的x、y坐标。 位置：{我的：“中心顶部”，在：“中心顶部”，of:窗口}， - Lodlaiden

Answer 2

这对我有用

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

你还可以在这里检查对话框的位置
查找位置

- Dragon

Answer 3

我在搜索相同问题时遇到了这个，但我已经得到了答案：

position: ['center', 'top+100']

这将使内容水平居中，并距离顶部100像素。

这也可以起作用。

position: ['center', 'center+100']

水平居中并且距离底部中心100像素

- Exlord

Answer 4

我根据Exlord的答案进行了调整。

position: ['center-7%', 'center-12%']

这会水平和垂直地进行调整。

$(".popup").dialog({    
position: ['center-7%', 'center-12%'],
title: 'Updating',
    width: "auto",
}
});

- Mikeys4u

Answer 5

试试这个：

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

- Ahmed

Answer 6

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

对我有用。

- Santosh Bt

Answer 7

如果有人因为链接的class具有单击事件处理程序而创建打开jQuery对话框的链接，您可能会注意到它可能会跳转到页面顶部，但是创建模态对话框在页面深处，您必须向下滚动。

如果有人只是想阻止jQuery对话框跳转到顶部，并希望它保持在您单击的链接附近，请删除href。 几乎要疯了，试图解决这个问题。 HTML5规范显然理解href = ""或href = "#" 表示移动到顶部。

- DMadden51

Answer 8

将 CSS 应用于您的 #dialog-form，使用 % 示例

如果宽度为 1000

请添加

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

使其居中。或者您可以使用 iframe。

- Bert