jqueryui对话框定位

Question

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

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

            });

Answer 1

使用位置选项将对话框的顶部与窗口的顶部对齐（加上一个像素或百分比抵消）。

这应该使对话框水平居中，并将其放置在距顶部 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 },

你也可以在此处检查对话框位置
查找位置

Answer 3

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

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

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

这也可以

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

水平居中，距离中心下方 100 像素

Answer 4

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

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

水平和垂直调整

$(".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 中，

如果宽度 = 1000，则

使用 % 样本put

left:50%
左边距：-500px；

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