使用动态高度内容垂直居中放置 jQuery 对话框答案

【问题标题】：Position jQuery dialog centered vertically with dynamic height contents使用动态高度内容垂直居中放置 jQuery 对话框
【发布时间】：2015-03-03 11:15:16
【问题描述】：

我正在使用一个内容大小可变的 jQuery 对话框。我使用 create 方法动态填充内容。当对话框呈现时，对话框的左上角位于屏幕的中心，但由于对话框很高，所以底部远离页面。无论对话框的大小如何，我都希望它完全居中。这是 jQuery：

var dialogOptions = {
    title: "",
    modal: true,
    width: 'auto',
    autoOpen: false,
    create: function () {
        $(this).load("/Management/RenderPartialCreateSubject");
    }
};

$("#dialog-message").dialog(dialogOptions);
$("#dialog-message").dialog("open");

我唯一能想到的是在定位对话框之前没有加载内容。有什么办法让它预先加载内容？

我也尝试将部分视图直接加载到 div 中，然后像这样打开对话框：

$.get("/Management/RenderPartialCreateSubject", null, function (data) {
    $("#dialog-message").html(data);
});
//open add new subject dialog
var dialogOptions = {
    title: "",
    modal: true,
    width: 'auto',
    autoOpen: false
};

$("#dialog-message").dialog(dialogOptions);
$("#dialog-message").dialog("open");

第一次渲染不正确，但第二次可以正常工作（在加载内容之后）。

【问题讨论】：

尝试在第二个示例之后添加$("#dialog-message").hide().delay(500).show();，或者您可以尝试将.dialog("close").dialog("open") 添加到$("#dialog-message").dialog("open"); 的末尾。恐怕我会尽量避免对话，所以我不做任何承诺。

标签： javascript jquery html asp.net-mvc-4 jquery-dialog

【解决方案1】：

我会等着看是否有人有更好的答案，但我能够通过将 $.get 替换为 $.ajax 并设置 async: false 来解决它，这允许在显示对话框之前加载内容。

【讨论】：