Login Button Inside jQuery BlockUI

Question

I made a log in form which is invisible and i'm using BlockUI to show the form.

I can open the form and exit the form but when I click the "Login" button, it doesn't postback to the server.

Any idea on how to make the log in button postback?

Note:the log in function works since I tried to place it on the page itself without blockui and it posts back.

My login form

<div id="LoginDiv" class="LoginDiv">
    <input type="image" id="CloseForm" src="../Images/SiteRelated/CloseForm.jpg" style="float: right;" />
    <div style="display: inline-block; margin-top: 15px">
        Username
    </div>
    <div class="InlineBlock">
        <asp:TextBox ID="UsernameTB" Text="Or" runat="server" Style="width: 90px"></asp:TextBox>
    </div>
    <div style="clear: both;">
    </div>
    <div class="InlineBlock">
        Password
    </div>
    <div class="InlineBlock">
        <asp:TextBox ID="PasswordTB" TextMode="Password" Text="123" runat="server" Style="width: 90px;
            margin-right: 18px"></asp:TextBox>
    </div>
    <asp:Panel ID="Panel1" HorizontalAlign="Center" runat="server">
        <asp:Button ID="LoginBtn" runat="server" Text="Login" Style="width: 150px;" OnClick="LoginBtn_Click" />
    </asp:Panel>
</div>

My Javascript

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#CloseForm').click(function () {
            $.unblockUI();
        });

        $('#Login').click(function () {
            $.blockUI.defaults.css = {
                padding: 0,
                margin: 0,
                width: '15.8%',
                top: '40%',
                left: '35%',
                textAlign: 'center',
                color: '#000',
                border: '3px solid #aaa',
                backgroundColor: '#fff',
                cursor: 'wait'
            };
            $.blockUI({ message: $('#LoginDiv') });
        });
    });
</script>

Answer 1

I think you need to append login div back to the form. The new javascript would look like this.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#CloseForm').click(function () {
            $.unblockUI();
        });

        $('#Login').click(function () {
            $.blockUI.defaults.css = {
                padding: 0,
                margin: 0,
                width: '15.8%',
                top: '40%',
                left: '35%',
                textAlign: 'center',
                color: '#000',
                border: '3px solid #aaa',
                backgroundColor: '#fff',
                cursor: 'wait'
            };
            $.blockUI({ message: $('#LoginDiv') });

             //Add the LoginDiv back to the form.
            $('#LoginDiv').parent().appendTo($("form:first"));
        });
    });
</script>