jQuery UI 对话框定位 - 如何使其保持居中答案

【问题标题】：jQuery UI Dialog positioning - How to make it remain centeredjQuery UI 对话框定位 - 如何使其保持居中
【发布时间】：2010-06-22 23:35:59
【问题描述】：

基本上我希望对话框在调整窗口大小（或切换到全屏窗口）时保持居中。

此外，对话框是可拖动的，理想情况下，我希望它在调整窗口大小时保持在页面上的拖动位置。但如果它重置回中心，那么我也会接受。

我尝试在“.ui-dialog”类上设置“位置：相对”，但这会在页面底部产生一个很大的空白；使用 DOM 检查器工具，我一直无法弄清楚是什么原因造成的。

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

你可以这样做：

$("#dialog").dialog({
    drag: function() {
        $.data(this, 'dragged', true);
    },
    open: function() {
        $.data(this, 'dragged', false);        
    }
});
$(window).resize(function() {
    $(".ui-dialog-content").each(function() {
        if(!$.data(this, 'dragged'))
            $(this).dialog('option', 'position', 'center');
    });
});

You can try out a demo here，这会将对话框重新定位在window.resize 上，前提是您在打开后没有拖动它。打开时，我们将dragged的数据设置为false，如果我们拖动它，将它设置为true......如果它仍然是false（尚未拖动），则重新-center 发生，否则我们将其留在当前位置。

顺便提一下关于拖动检测的好问题/想法，这将改进我目前正在开发的应用程序，我自己将使用它:)

【讨论】：

谢谢 - 这似乎工作正常，但仍然不完全在那里。我忘了提到我的容器 div 以页面为中心（边距：0 自动）。这就是问题似乎出现的原因。虽然容器 div 始终保持在页面的中心，但对话框不会保持相对于容器。
@GSTAR - 如果是这种情况，您需要使用代码更改$(this).dialog('option', 'position', 'center');，以便根据需要定位对话框......它只有这么多内置位置，除此之外你需要手动调整。您可以在此处查看有效的位置选项：jqueryui.com/demos/dialog/#option-position
是的，我已经尝试过位置选项，但问题是它相对于窗口而不是容器 div 定位对话框。 IE。如果我指定“位置：[350, 150]”这些值是指窗口而不是容器。
顺便说一句，如果我在“.ui-dialog”类上执行“left: 50%”之类的操作，它不允许我在页面上向左或向右拖动对话框。
@GSTAR - 您可以将.offset() 用于容器并将这些值添加到:) 使用.left 和.top，这将使您获得容器的左上角，并且添加任何您想要的金额。