69

我试过以下代码，但它只将对话框左上角位置定位到中心，这使得元素向右对齐。如何将对话框居中到计算元素宽度的真实中心，以便中心线将对话框切割为 50% 50% 的一半？

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

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

4

21 回答 21

70

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

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

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

于 2010-09-03T02:11:09.743 回答
51

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

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

默认情况下应该居中。

我确实看过这篇文章，还检查了官方 jquery-ui 网站上关于定位对话框的内容：并在其中讨论了两种状态：初始化和初始化后。

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

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

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

在 init 之后获取或设置位置选项。

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

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

于 2009-12-03T13:14:16.030 回答
20

因为对话框需要位置，所以需要包含js位置

<script src="jquery.ui.position.js"></script>
于 2012-06-28T13:14:34.087 回答
12 
open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}
于 2015-06-03T15:28:12.400 回答
11

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

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

感谢@vm370 为我指明了正确的方向。

于 2013-03-15T05:13:28.827 回答
8

将 jQuery 对话框放在浏览器窗口的中心，我得到了最好的结果：

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

如http://api.jqueryui.com/position/上的文档中所述，可能有更准确的方法来使用选项“ using ”定位它，但我很着急......

于 2015-04-10T23:09:53.643 回答
7

要固定中心位置，我使用：

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}
于 2013-08-02T14:18:34.737 回答
6

试试这个....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});
于 2014-05-14T02:16:42.703 回答
5

Jquery UI 1.9.2, jquery 及以后的版本不支持 IE8

我为此找到了两种解决方案。

  1. 回滚jquery UI 1.7.2以支持 IE8，

  2. 试试这个代码Jquery UI 1.9.2 

position: {my: "center",  at: "center", of: $("body"),within: $("body") }
于 2014-02-21T06:01:58.397 回答
5

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

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});
于 2015-11-09T14:51:26.460 回答
4

JQuery Dialog 定位会让您陷入困境的另一件事，特别是对于大于浏览器视口的文档 - 您必须添加声明

<!DOCTYPE html>

在文档的顶部。

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

于 2014-12-15T13:14:02.283 回答
4

以下位置参数对我有用

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

祝你好运！

于 2015-05-15T02:54:35.637 回答
3

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

于 2012-12-20T10:57:20.527 回答
3

我遇到了这个问题，我终于想通了。直到今天我还在使用一个非常旧的 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 }
);
于 2017-04-14T11:34:24.010 回答
2

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

于 2012-01-23T17:13:45.877 回答
2

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

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

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

于 2012-11-13T21:49:40.903 回答
2

对旧版本和不想使用位置的人试试这个：

$("#dialog-div-id").dialog({position: ['center', 'top'],....
于 2013-06-14T13:39:11.677 回答
2

如果在移动设备上使用 jquery ui，您还需要手动重新居中 - 对话框是通过“left & top”css 属性手动定位的。如果用户切换方向，则定位不再居中，之后必须调整/重新居中。

于 2013-06-14T22:25:18.247 回答
2

对于 Win7/IE9 环境，只需在您的 css 文件中设置：

.ui-dialog {
   top: 100px;
   left: 350px !important;
}
于 2013-07-22T14:20:44.707 回答
0

我用css修复了：

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}
于 2014-02-14T04:18:26.167 回答
0

无法让 IE9 使对话框居中。

通过将其添加到 css 来修复它：

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

百分比无所谓。任何小的数字都有效。

于 2014-05-30T22:45:14.317 回答