How to get value of textbox placed inside jquery popup dialog

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                buttons: {
                    Ok: function () {
                        $("[id*=Button1]").click();
                    },
                    Close: function () {
                        $(this).dialog('close');
                    }
                }
            });
        });
    </script>

<div id="dialog" style="display:none">
    Click OK to do PostBack!
        <asp:TextBox ID="TextBox1" AutoPostBack="true" runat="server"></asp:TextBox>
</div>
    <asp:Button ID="Button1" runat="server" Text="Button" style = "display:none" OnClick = "Button1_Click" />

protected void Button1_Click(object sender, EventArgs e)
    {
        string str = TextBox1.Text;

    }