登录按钮在jQuery BlockUI中

Question

我创建了一个不可见的登录表单,我正在使用BlockUI来显示表单.

我可以打开表单并退出表单,但是当我单击"登录"按钮时,它不会回发到服务器.

关于如何使登录按钮回发的任何想法？

注意:登录功能起作用,因为我试图将它放在页面本身而没有blockui并且它回发了.

我的登录表单

<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>

我的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

我认为您需要将登录div添加回表单.新的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') });

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