jQuery UI对话框未定位中心屏幕

Question

我有一个jQuery对话框,意思是位于屏幕中间.但是,它似乎略微偏离垂直中心.

这是代码:

$('#add_box').dialog({
    autoOpen: true,
    width: 300,
    modal: true,
    resizable: false,
    bgiframe:true
});

任何想法为什么这不会中心？

Answer 1

如果在对话框显示后滚动视口,则它将不再居中.通过在页面中添加/删除内容,可能会无意中导致视口滚动.您可以通过调用以下内容在滚动/调整大小事件期间重新定位对话框窗口

$('my-selector').dialog('option', 'position', 'center');

Answer 2

您是否在页面中添加了jquery.ui.position.js？我遇到了同样的问题,检查了这里的源代码并意识到我没有将js添加到我的页面,之后...对话框神奇地居中.

Answer 3

在这里挖掘一个古老的坟墓,但是对于新的Google搜索者.

通过将此事件添加到对话框,您可以在用户滚动时保持模型窗口的位置.这会将它从绝对位置更改为固定位置.无需监控滚动事件.

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}

Answer 4

我遇到了同样的问题.它最终成为了jquery.dimensions.js插件.如果我删除它,一切正常.我把它,因为它需要其它插件的,但是我从链接发现这里说的尺寸是前一段包含了jQuery核心(http://api.jquery.com/category/dimensions).你应该可以简单地摆脱维度插件.

Answer 5

1.)jQuery对话框以您放入的任何元素为中心.

没有更多的信息,我的猜测是你有一个带有边距或类似的身体div.将弹出式div移动到身体级别,你会很高兴.

2.)如果在加载div时动态地向div添加内容,则居中将不正确.在您输入数据之前,请勿显示div.

Answer 6

只需在同一页面中添加以下CSS行.

.ui-dialog 
{
position:fixed;
}

Answer 7

要解决此问题，我确保将我的身高设置为100％。

body { height:100% }

当用户滚动时，这也保持中心位置。

Answer 8

将其添加到对话框声明中

my: "center",
at: "center",
of: window

示例:

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})