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

Question

我尝试了以下代码，但它只将对话框的左上角位置定位到中心，这会导致元素与右侧对齐。如何将对话框居中到实际中心，以计算元素的宽度，使得中心线将对话框分成50% 50%的两半？

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

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

：

这是一个链接，指向jQuery UI对话框的position选项的文档页面。请注意保留HTML标记。

- newbie

---

我遇到了一个类似的问题，我猜测这也是 OP 遇到的问题。无论我做什么，对话框都定位在左上角！非常令人沮丧。 - Nate Bunney

您的提示使用位置（center）属性/属性解决了我在移动设备上类似的问题。但是我使用的是jquery-ui-1.9.2.custom。 - Michal - wereda-net

Answer 1

最新的jQuery UI包含一个position组件：

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

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

- WhyNotHugo

---

有时候这段代码会改变对话框里面内容的位置，但是不会改变外部框架的位置，所以我遇到了一些问题。以下是解决方法：$('#myDialog').dialog('widget').position({my:"center", at:"center", of:window})。 - semmelbroesel

当我在Safari 6.2.3上滚动并触发此函数时，该元素将定位在视口下方，因此对我无效。 - gamov

@semmelbroesel $('#myDialog').dialog('widget') 和 $('#myDialog').parent() 都可以使用。 - actaram

$('#MyDialog').dialog('option','position',{ my: "center", at: "center", of: window })。 - Joe DF

@JoeDF的答案是正确的。但它在iOS Safari中不起作用。有人有什么想法，为什么？ - PiyaModi

Answer 2

我相信你不需要设置位置：

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

默认情况下应该居中。

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

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

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

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

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

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

我认为，如果您删除position属性，您会发现它会自动居中，否则请尝试第二个setter选项，其中定义了"option"、"position"和"center"的3个元素。

- Luke Duddridge

---

居中的原因是有时在对话框已经加载后动态加载内容。 - isaaclw

Answer 3

由于对话框需要一个位置，因此您需要包含js位置。

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

- projo

---

太好了 - 我们有赢家了。那正是我的问题。谢谢！ - Chris Holmes

太好了！谢谢。我之前一直不知道为什么它不能正常工作。 - space_balls

Answer 4

open: function () {

    var win = $(window);

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

- Jean G.T

---

我喜欢这个解决方案，结合 window.scrollTo(0, 0); 对我非常有效 +1 - MaVRoSCy

@MaVRoSCy，我遇到了类似的问题。如果我滚动然后打开对话框，它不会居中定位。你是如何使用scrollTo的？我应该在哪里添加它？ - user1527762

@user1527762 你尝试使用过以下初始化参数吗：autoReposition: true，作为jquery ui对话框实例的初始化参数吗？此外，您可以简单地使用以下内容：jQuery(window).on('resize', function() 并将类似上面的逻辑绑定到它，但使用https://api.jqueryui.com/dialog/#method-isOpen中描述的内容。 - Jean G.T

我使用了这段代码来确保当窗口有滚动条时，它位于窗口的中间： left: (window.innerWidth - $(this).parent().parent().outerWidth())/2, top: (window.innerHeight - $(this).parent().parent().outerHeight())/2 - Doctor Parameter

@Blake Parmenter：如果操作者有自由处理窗口的权限，那么resizeTo(x,y) JavaScript本地函数可以帮助确保窗口大小合适，或者寻找全屏API也可能起作用 :) 这是为了确保基于jQuery UI的对话框窗口在查看器屏幕上适合，但这可能需要执行许可并且如果导航浏览器启用了选项卡或弹出窗口拦截器，则可能会出现问题。 - Jean G.T

Answer 5

所以，如果有人像我一样遇到了这个页面，或者在15分钟后忘记了，我正在使用jqueryui对话框版本1.10.1和jquery 1.9.1与ie8在一个iframe中（blah），它需要指定一个within，否则它不起作用，即：

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

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

- Mike

---

我并不需要使用 within，但我点赞的原因是它使用了 position 属性，如下所示：$('.selector').dialog({ position: my: "center bottom", at: "center top", of: $("#submitbutton") }); 而不是在结尾处添加一个调用：$('.selector').position(...)。 - LosManos

这个很有意义。谢谢。 - hsuk

Answer 6

我正在尝试将jQuery对话框置于浏览器窗口中心以获得最佳效果，方法如下：

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

在 http://api.jqueryui.com/position/ 的文档中，使用选项 "using" 可能有更准确的定位方式，但我很匆忙...

- Derek Gogol

---

这必须是最高的！谢谢 - Igor Rebega

Answer 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)
    });
}

- Eduardo Cuomo

---

我认为你需要 $(w)。此外，这似乎没有处理浏览器中的滚动。 - Chris Prince

@Chris Prince 不一定，我认为导航浏览器足够智能，知道我们在那个实例中引用的是窗口，但我可能错了，如果应该是 w = $（window）而不是 nav browser，这是一个快速修复。这种方法很有趣，因为每次打开对话框时，它都会查找窗口，这充当了窗口调整大小函数调用，所以这就是我的点赞原因，尽管我必须补充说，通常当我在对话框中使用打开功能时，我也会在关闭时使用 this.dialog（'destroy'），以允许重用，特别是与jQuery UI主题相关的情况。 - Jean G.T

Answer 8

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

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

- prokki

---

我也是。你的建议解决了我的问题。你找到更好的解决方案了吗？在某个时候，我改变了jQuery的版本，这个问题就出现了。降级并没有解决它。更新：我将位置对象移到了第一个参数组，并且它仍然有效。 - Chad

Answer 9

尝试这个...

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

- Rikin Patel

Answer 10

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") }

- r-arun-r

---

在IE11中使用jQueryUI 1.11.4 完美运行。 - Johnny Bones

+1 是因为它允许像 appendTo 这个元素一样停靠在内部参数中，如果使用模态窗口，则可以限制该停靠。 - Jean G.T

在 body 的中心？有点奇怪... 如果您的页面是普通网页（即比视口更长），则您的对话框窗口将出现在用户视野之外，他需要向下滚动才能看到它。 - ThePhi