jQuery UI Dialog with dynamic content not being centered properly

Question

I have a jQuery UI Dialog that is displayed when there are form errors.

Heres the code:

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");
            }
        }
    });
}

the errors variable would contain something like First Name<br />Last Name<br />Email Address<br />

It works great, except for the fact that it is not centered. It seems to be positioning itself before the content is loaded, so that when it is displayed, the bottom margin of the dialog is closer to the bottom of the window compared to the top margin of the dialog.

I tried using the position option, but nothing seems to work.

Any help would be greatly appreciated.

Answer 1

Heres how I fixed it:

I created an empty div on the page with the id of error-dialog and gave it css display: none;.

Then I changed my code to this:

        $('#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");
                }
            }
        });

Now it is populating the dialog with content before display it, therefore allowing it to center itself properly.