jQuery Dialog, UpdatePanel, RegisterStartupScript, with Show: 'blind' bug?

Question

Using ASP.NET Web Forms with an UpdatePanel, and using jQueryUI dialogs with a <asp:Button> inside.

First, my code looked like this simple dialog demo with a show: 'blind' effect, but I had the issue that jQuery moves the dialog outside the form, preventing the ASPNET controls from posting back to the server. So, I used this excellent blog solution, namely by adding this to the dialog init:

open: function (type, data) {
    $(this).parent().appendTo("form");
},

However, this seems to cause a bug in which the dialog loads in the corner of the page before being positioned, as you can see (hit "run" on that page to see the dialog reload). I can fix this by removing the blind effect from the dialog:

show: 'blind',

Removing the blind effect removes this appear-in-the-corner issue, as you can see here. However, I like my blind effect. Is there a way to make it play nicely with the UpdatePanel and this ASP.NET Web Forms appendTo() hack?

EDIT:

Moving the $(this).parent().appendTo("form") command to occur once at pageLoad instead of every time the dialog opens does fix the issue. However, if the dialog is opened with a command from the code-behind like the following, the div jumps out of the form again:

ScriptManager.RegisterStartupScript(Me, Me.GetType, "Show", "showDialog();", True)

At this point, it looks like a bug with RegisterStartupScript! Is there a workaround for injecting JavaScript from the code-behind that doesn't move my dialog's div? In this case, I run server-side code to decide if the dialog should be shown, so I can't just use jQuery's .click() to bind the dialog to the button. It needs to be conditional based on code-behind calculations.

Answer 1

Take

$(this).parent().appendTo("form");

and place it like this

$(function() {
    var dlg = $("#messageSentDialog").dialog({
        bgiframe: true,
        autoOpen: false,
        draggable: false,
        resizable: false,
        modal: true,            
        show: 'blind',
        buttons: {
            Ok: function() {
                $(this).dialog('close');
            }
        }
    });
    dlg.parent().appendTo("form");
});

function showMessageSentDialog() {    
    $("#messageSentDialog").dialog("open");
}

$(function() {
    showMessageSentDialog();
});

Fiddled here