jQuery UI对话框，动态内容未正确居中

Question

我有一个jQuery UI对话框，当有表单错误时显示。

下面是代码：

function alert_field_errors (errors)
{
    $('<div></div>').dialog({
        modal: true,
        title: "Error",
        open: function () {
            $(this).html('The following are required:<br /><br />'+errors+'<br />Please complete these in order to continue.');
        },
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
}

errors变量将包含First Name<br />Last Name<br />Email Address<br />

之类的内容

它的效果很好，除了它没有居中的事实。它似乎是在加载内容之前定位自己，因此当它显示时，对话框的下边距比对话框的上边距更靠近窗口的底部。

我尝试使用position选项，但似乎没有任何效果。

非常感谢任何帮助。

Answer 1

以下是我如何修理它：

我在页面上创建了一个ID为error-dialog的空div，并将其赋予css display: none;。

然后我将代码更改为：

        $('#error-dialog').html('The following are required:<br /><br /><i>'+$errors+'</i><br />Please complete these in order to continue.');
        $('#error-dialog').dialog({
            modal: true,
            title: "Error",
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });

现在它在显示内容之前填充内容对话框，因此允许它正确居中。