Question

我尝试过以下代码，但它只将对话框的左上角位置定位到中心，这样就可以将元素对齐到右边。如何将对话框置于计算元素宽度的实际中心，以便中心线将对话框切换到50％50％的半边？

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

Answer 1

最新的jQuery UI有一个位置组件：

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Doc：http://jqueryui.com/demos/position/
获取：http://jqueryui.com/download

Answer 2

我很确定你不需要设置位置：

$("#dialog").dialog();

should center by default

我确实看过这篇文章，并检查了它在official jquery-ui site about positioning a dialog上的内容：并在其中讨论了两种状态：初始化和初始化之后。

代码示例 - （取自jQuery UI 2009-12-03）

使用指定的位置选项初始化对话框。

$('.selector').dialog({ position: 'top' });

在初始化后获取或设置位置选项。

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

我认为如果您要移除位置属性，您会发现它自身居中，否则请尝试第二个setter选项，您可以在其中定义“option”“position”和“center”的3个元素。

Answer 3

因为对话框需要一个位置，你需要包含js位置

<script src="jquery.ui.position.js"></script>

Answer 4

所以，如果有人像我一样点击这个页面，或者当我在15分钟内忘记时，我在iframe（blah）中使用jqueryui对话框版本1.10.1和jquery 1.9.1与ie8，它需要一个在指定范围内或它不起作用，即

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

感谢@ vm370让我指向正确的方向。

Answer 5

open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}

Answer 6

要修复中心位置，我使用：

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

Answer 7

试试这个......

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

Answer 8

我获得了最佳结果，将jQuery对话框置于浏览器窗口的中心位置：

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

通过选项＆＃34; 使用＆＃34;可能更准确地定位它。正如http://api.jqueryui.com/position/的文件所述，但我很着急......

Answer 9

我必须两次调用函数dialog()来定位对话框（jQuery v1.11.2 / jQueryUI v1.10.4）。

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});

Answer 10

Jquery UI 1.9.2，jquery和更高版本不支持IE8

我找到了两个解决方案。

回滚到jquery UI 1.7.2以支持IE8，
使用Jquery UI 1.9.2

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

Answer 11

以下位置参数为我工作

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

祝你好运！

Answer 12

根据以下讨论，问题可能是由于较新的jQuery版本中的IE兼容性较低，恢复到1.7.2似乎解决了问题，这只发生在IE8中。 http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8

Answer 13

另一件可以让你使用JQuery Dialog定位的东西，特别是对于大于浏览器视图端口的文档 - 你必须添加声明

<!DOCTYPE html>

位于文档的顶部。

没有它，jquery会将对话框放在页面底部，并且在尝试拖动时可能会出错。

Answer 14

尝试使用旧版本和不想使用位置的人：

$("#dialog-div-id").dialog({position: ['center', 'top'],....

Answer 15

如果在移动设备上使用jquery ui，您还需要进行手动重新定心 - 通过'左和右'手动定位对话框。顶级'css属性。如果用户切换方向，则定位不再居中，并且必须在之后进行调整/重新居中。

Answer 16

对于刚刚在css文件中设置的Win7 / IE9环境：

.ui-dialog {
   top: 100px;
   left: 350px !important;
}

Answer 17

您是否只在IE中遇到此问题？如果是这样，请尝试将其添加到页面的HEAD标记的第一行：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

虽然我在以后的jQuery中修复了所有兼容性问题，但今天我遇到了这个问题。

Answer 18

如果您使用单独的jquery文件或自定义jquery下载，请确保您还在页面中添加了jquery.ui.position.js。

Answer 19

我遇到了这个问题，我终于明白了。直到今天，我还在使用jQuery版本1.8.2的旧版本。

我曾经使用dialog的所有地方，我使用以下位置选项初始化它：

$.dialog({
    position: "center"
});

但是，我发现删除position: "center"或用正确的语法替换它并没有做到这一点，例如：

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

虽然上面的说法是正确的，但是当我加载页面时，我还使用option将位置设置为中心，用旧方法，如下所示：

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

这导致我的所有对话窗口都粘在视口的左上角。

我必须用下面正确的新语法替换它的所有实例：

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);

Answer 20

我用css修复：

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}

Answer 21

无法让IE9以对话框为中心。

通过将其添加到css：

来修复它

.ui-dialog {
    left:1%;
    right:1%;
}

百分比无关紧要。任何一小部分都有效。

如何将jQuery对话框置于中心位置？

21 个答案: