如何在调整浏览器大小时自动居中jQuery UI对话框？

Question

当你使用jquery UI对话框时,一切都很好,除了一件事.当浏览器调整大小时,对话框只会保持在初始位置,这可能非常烦人.

你可以测试一下:http: //jqueryui.com/demos/dialog/

单击"模态对话框"示例并调整浏览器的大小.

我希望能够在浏览器调整大小时让对话框自动居中.这可以在我的应用程序中以有效的方式完成我的所有对话吗？

非常感谢!

Answer 1

设置position选项将强制执行此操作,因此只需使用覆盖我#dialog在此处使用的所有对话框的相同选择器(如果它没有找到它们,则不执行任何操作,例如所有jQuery):

1.10之前的jQuery UI

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

jQuery UI 1.10或更高版本

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

这是同样的jQuery UI演示页面,只添加上面的代码,我们只是在窗口的resize事件中添加一个处理程序.resize(),因此它会在适当的时间触发重新居中.

Answer 2

作为Ellesedil的回答,

这个解决方案对我来说不起作用,所以我做了以下也是动态但缩短的版本:

$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

但是Ellesedil的+1

编辑:

更短的版本适用于单个对话框:

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

如果您有一些您不想触摸的独特对话框,则可能无法使用.each().

Answer 3

可以在此处找到更全面的答案,以更灵活的方式使用尼克的答案.

下面是对该线程的相关代码的调整.此扩展实质上创建了一个名为autoReposition的新对话框设置,该设置接受true或false.写入的代码将选项默认为true.将其放入项目中的.js文件中,以便您的页面可以利用它.

    $.ui.dialog.prototype.options.autoReposition = true;
    $(window).resize(function () {
        $(".ui-dialog-content:visible").each(function () {
            if ($(this).dialog('option', 'autoReposition')) {
                $(this).dialog('option', 'position', $(this).dialog('option', 'position'));
            }
        });
    });

这允许您在页面上创建对话框时为此新设置提供"true"或"false".

$(function() {
    $('#divModalDialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 435,
        height: 200,
        dialogClass: "loadingDialog",
        autoReposition: true,    //This is the new autoReposition setting
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

现在,此对话框将始终重新定位.AutoReposition(或任何您调用的设置)可以处理任何没有默认位置的对话框,并在窗口调整大小时自动重新定位它们.由于您在创建对话框时设置了此对象,因此无需以某种方式识别对话框,因为重新定位功能会内置到对话框本身中.最好的部分是,由于每个对话框设置了这个,你可以让一些对话框重新定位,其他对话框保留在原来的位置.

感谢jQuery论坛上的用户scott.gonzalez提供的完整解决方案.