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]坐标对，在视口左上角的像素偏移处（例如[350,100]）。

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

Answer 2

这对我有用

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

此外，您可以在此检查对话位置 Find Position

Answer 3

我在寻找同样的问题时遇到了这个问题，我已经得到了答案：

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

这将水平居中，顶部为100像素

这也有效

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

水平居中，距中心100像素

Answer 4

我调整了Exlord的答案以适应。

职位：[＆＃39; center-7％＆＃39;，＆＃39; center-12％＆＃39;]

水平和垂直调整

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

Answer 5

试试这个：

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

Answer 6

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

为我工作。

Answer 7

如果由于链接的类有点击事件处理程序而有人正在创建打开jQuery对话框的链接，那么可能会注意到它可能会跳到顶部页面，但在页面下方创建模式对话框，你必须滚动到它。

如果有人试图阻止jQuery对话框跳到顶部，希望它保持在您点击的链接附近，只需删除href即可。几乎疯了试图解决这个问题。 HTML5规范显然理解href=""或href="#"意味着移至顶端。

Answer 8

将css应用到＃dialog-form use％sample

如果width = 1000

把

左：50％保证金左：-500px;

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

jqueryui对话框定位

8 个答案: