Jquery Modal popup opens on second click not on first

Question

i got stuck with jquery modal dialog. my modal shows by clicking twice on the button and spoils the markup also on the page i read no of posts including stack overflow this

AND this

but my issue doesn't match both.So i request you to please not vote down the question.

i am using the following code to show modal

<script type="text/javascript">

        function overlayclickclose() {
            if (closedialog) {
                jQuery('#mydialog').dialog('close');
                             }
            closedialog = 1;
                                    }

            jQuery('#mydialog').dialog({
            bgiframe: true,
            autoOpen: false,
            modal: true,
            width: 900,
            height: 400,
            resizable: false,
            open: function() { closedialog = 1; jQuery(document).bind('click', overlayclickclose); },
            focus: function() { closedialog = 1; },
            close: function() { jQuery(document).unbind('click'); }
            });
            </script> 

now here is my div to be shown as popup

<div id="mydialog"><NL:TemplatePicker ID="TemplatePicker1" Runat="server"></NL:TemplatePicker></div>

And i am calling the modal on Click of a button by calling it in asp.net code behind like this

protected void btnChooseTemplate_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterClientScriptBlock(this.Page, Page.GetType(), "change", "jQuery('#mydialog').dialog('open');closedialog = 1;jQuery('#mydialog').parent().appendTo(jQuery('form:aspnetForm'));", true);
    }

my page uses ajax updatepanel.

any help would be regarded. if you need anything more to knowthe problem better let me know.

Thanks