Login Button Inside 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> 

Answer 2

Это очень помогло мне. У меня была аналогичная проблема с blockUI, где у меня были кнопки asp.net, которые не были бы возвращены. Предложение от awright18 очень помогло.

<div id="taxStatus" style="display:none;"> 
<br /> 
    <div class="row"> 
     <div class="three columns"><asp:Button runat="server" ID="unitedStatesTaxStatusButton" Text="United States" CssClass="submitButton" OnClick="unitedStatesTaxStatusButton_Click" /></div> 
     <div class="three columns"></div> 
     <div class="six columns"></div> 
    </div> 
    <br /><br /> 

</div> 

OnClick просто называет это:

protected void unitedStatesTaxStatusButton_Click(object sender, EventArgs e) 
    { 
     //do whatever 
    } 

Мой JQuery:

$(document).ready(function() { 
     $('#<%=unitedStatesTaxStatusButton.ClientID%>').click(function() { 
      $.unblockUI(); 

      //** added this line to make it work ****** 
      $('#taxStatus').parent().appendTo($("form:first")); 
      return true; 
     });