UI 对话框上的自动高度，如果高度更改对话框不再垂直居中答案

【问题标题】：Auto height on UI Dialog, if height changes dialog is no longer vertically centredUI 对话框上的自动高度，如果高度更改对话框不再垂直居中
【发布时间】：2013-07-29 08:41:28
【问题描述】：

我有下面的函数，它将一个 URL 加载到我的对话框中，当打开该 URL 时，一个函数在文档就绪时运行，该函数根据一个值显示或隐藏 div。反过来扩展对话框，自动高度有效，但对话框向下扩展并且不再居中。

所以对话框打开 > 在对话框中打开 URL > 显示面板运行 > 对话框扩展高度 > 对话框不再居中。

代码尝试自动重新中心

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

对话框代码

$(document).ready(function () {
    var width = $(window).width() / 2;
    $.ajaxSetup({ cache: false });

$(".editDialog").live("click", function (e) {
        var url = $(this).attr('href');
        $("#dialog-edit").dialog({
            title: 'Edit',
            autoOpen: false,
            resizable: true,
            autoResize:true,
            minHeight: 'auto',
            width: width,
            modal: true,
            draggable: true,
            open: function (event, ui) {
                //Show the loading div on open.
                $("#dvLoading").show();
                //adding a callback function wich will be launched after the loading
                $(this).load(url,function(response, status, xhr) {
                    if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        $(this).html(msg + xhr.status + " " + xhr.statusText);
                    } else $("#dvLoading").hide();
                });
            },
            close: function (event, ui) {
                $(this).dialog('close');
            }
        });

        $("#dialog-edit").dialog('open');
        return false;
    });

URL 文档准备显示/隐藏 DIVS

$(document).ready(function () {
    showPanel()
});
function showPanel()
{
    var panel = $("#lstAssetTypes").val();
    panel = panel.substr(panel.indexOf(",") + 1)

    switch (panel)
    {
        case "User":
            $("#dvWKS").show();
            $("#dvNTW").hide();

            break;
        case "Network":
            $("#dvWKS").hide();
            $("#dvNTW").show();
            break;
        default:
            break;
    }
}

HTML for Divs 调用

 <div id="dialog-confirm" style="display: none">
    <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        Are you sure to delete?
    </p>
</div>
<div id="dialog-edit" style="display: none">
    <div id="dvLoading" class="loading"><img src="~/Images/loading.gif"><p>Loading please wait...</p></div>
</div>
<div id="dialog-view" style="display: none">
</div>

【问题讨论】：

如果你调整窗口大小，它会起作用吗？
window resize 严重破坏了它，它进一步下降，waaay 进一步，我想实际上我不希望在窗口调整大小时发生这种情况，我希望它在 div 本身的高度增长时重新自动居中，如果你得到我？
我明白了，只是想弄清楚它是否这样做。 :) 我注意到：初始化对话框时您正在调用#dialog-edit，但之后，在 resize 函数中，您在 .editDialog 上调用它。我想这无关紧要，因为您还使用了 .ui-dialog-content:visible，但我看不到您的 HTML，所以我不知道在 .editDialog 上调用它是否会破坏它。
我添加了用于函数的 HTML，在我的代码中我还删除了调整窗口大小的函数，我不需要这些，因为它只在对话框高度增长时我希望它重新定位
您使用的是哪个 jquery 版本？我把你的一些东西放在了 jsFiddle 中：jsfiddle.net/EubTC。调整结果框的大小以查看它是否居中。我知道您在调整大小时不需要它，但这是为了表明它有效。 resize调用的函数也可以在showpanel函数中调用。

标签： jquery jquery-ui-dialog

【解决方案1】：

似乎无法自动检测高度变化，没有事件。相反，您需要手动调用重新定位代码。使用这样的函数：

var reposition_dialog = function() {
    $("#dialog-edit").dialog("option", "position", "center");
        $(".ui-dialog-content:visible").each(function () {
        $(this).dialog("option", "position", $(this).dialog("option", "position"));
    });
}

（我将 .editDialog 从您的代码更改为 #dialog-edit，因为这似乎是一个错误）

修改完内容后调用函数：

$(document).ready(function () {
    showPanel()
});
function showPanel()
{
    var panel = $("#lstAssetTypes").val();
    panel = panel.substr(panel.indexOf(",") + 1)

    switch (panel)
    {
        case "User":
            $("#dvWKS").show();
            $("#dvNTW").hide();

            break;
        case "Network":
            $("#dvWKS").hide();
            $("#dvNTW").show();
            break;
        default:
            break;
    }
    reposition_dialog();
}

如果您真的想自动检测它，我只会在由于某种原因您无法预测内容何时更改时才会这样做，请查看此线程： Detect element content changes with jQuery

【讨论】：

【解决方案2】：

尝试以下方法：

$.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                            $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                            $(window).scrollLeft()) + "px");
    return this;
}

$(dialogID).center();

// calling that function again on resize of window
$(window).resize(function(){
   $(dialogID).center();
});

// or you can either call it whenever your dialog is updated with new URL etc etc.

【讨论】：