2014-04-10 54 views
0

我遇到了關閉模式登錄框的問題。一切似乎都工作到模態屏幕和ajax功能,但我有關閉模式形式的問題。Ajax,Modal登錄不能關閉

的代碼如下:

HTML:

<a href="#" class="overlay" id="loginForm"></a> 

    <div class="modalForm_box" id="modalBox"> 
    <h3>Log In</h3> 
    <div id="note"> 
     <!-- Display any Error Message --> 
    </div> 
    <form class="modalForm" id="ajax-login-form" action="javascript:alert('success!');"> 
     <input type="hidden" name="action" value="user_login" /> 
     <!--<input name="novalue" type="hidden" value="" />--> 
     <input type="hidden" name="token" value="<?php echo Token::generate(); ?>"> 
     <label for="user_name">Username or Email</label> 
     <input name="user_name" class="user_name" value="" type="text"> 
     <label for="password">Password</label> 
     <input name="password" class="password" value="" type="password" /> 
     <div class="btn-fld"> 
      <label for="remember_me">Remember me &nbsp;</label> 
      <input name="remember_me" class="remember_me" type="checkbox" id="remember_me" style="width:auto"> 
      <a href="phpMS/forgot.php" title="Password Reminder">Forgotton password?</a> 
      <button name="submit" id="login" type="submit" value="Login">Login...</button> 
     </div> 
    </form> 
    <a class="close" href="#close" id="closeIt"></a> 
    </div> 

JS:

$(document).ready(function() { 
    $("#login").click(function() { 
     $("#ajax-login-form").submit(function() { 
      var str = $(this).serialize(); 
      $.ajax({ 
       type: "POST", 
       url: "functions/login.php", 
       data: str, 
       success: function (msg) { 
        if (msg == 'OK') { 
         $('#modalBox').hide(); // This line works fine. 
         $('#loginForm').hide(); // This line works fine. 
         $('#close').click(); // Does not work. 
         $('#close').trigger('click'); // Does not work. 
         location.reload(); //Some problems 
        } else { 
         $("#note").html(msg); // This line works fine. 
        } 
       } 
      }); 
     return false; 
     }); 
    }); 
}); 

正如你可以從我的代碼的筆記看,如果我隱藏的形式和覆蓋一切應該消失,但是當重載行被執行時,模態形式和覆蓋層重新出現。如果我刷新,這也會發生。點擊關閉,然後刪除模態窗體並覆蓋它應該。

然後我試圖激活關閉功能,但無論我嘗試什麼,我都無法讓它工作。

所有其他功能都很好。任何人都可以指出我正確的方向嗎?

回答

1

錯誤的關閉按鈕選擇

試試這個

$(document).ready(function() { 
    $("#login").click(function() { 
     $("#ajax-login-form").submit(function() { 
      var str = $(this).serialize(); 
      $.ajax({ 
       type: "POST", 
       url: "functions/login.php", 
       data: str, 
       success: function (msg) { 
        if (msg == 'OK') { 
         $('#modalBox').hide(); // This line works fine. 
         $('#loginForm').hide(); // This line works fine. 
         $('#closeIt').click(); // This will work. 
         $('#closeIt').trigger('click'); // This will work. 
         location.reload(); //Some problems 
        } else { 
         $("#note").html(msg); // This line works fine. 
        } 
       } 
      }); 
     return false; 
     }); 
    }); 
}); 
+0

這部分地解決了模式形式和覆蓋層接近的問題,但是在重新加載覆蓋層和形式時重新出現。 – talkpoppycock

+0

@talkpoppycock爲什麼你想重新加載? –

+0

因爲頁面內容在用戶登錄時發生變化。 – talkpoppycock

3

您在$('#close')選擇器上有錯誤。 改爲使用$('。close')或$('#closeIt')。

+0

這部分地解決了儘可能多的模態形式和覆蓋緊密的問題,但重裝都覆蓋和形式重新出現。 – talkpoppycock