Question

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

此外，对话框是可拖动的，理想情况下，我更喜欢在调整窗口大小时它是否保持在页面上的拖动位置。但如果它重新回到中心那么我也会满足于此。

我尝试在“.ui-dialog”类上设置“position：relative”，但这会在页面底部产生一个很大的空白区间;我一直无法使用DOM检查器工具找出导致这种情况的原因。

Answer 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（hasn'被拖了），重新中心发生了，否则我们将它留在当前的位置。

关于拖动检测的好问题/想法顺便说一下，这会改进我目前正在处理的应用程序，我自己会使用它：）

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

1 个答案: