Ajax, 모달 로그인하지 않음

Question

모달 로그인 상자를 닫는 데 문제가 있습니다. 모든 것이 모달 화면 및 아약스 기능까지 작동하는 것처럼 보이지만 모달 형식을 닫는 데 문제가 있습니다.

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; 
     }); 
    }); 
}); 

을 나는 형태와 오버레이 모두를 숨길 경우, 내 코드 노트에서 볼 수 있듯이 다음과 같이

코드는 사라지다가 다시로드 라인이 실행되면 모달 폼과 오버레이가 다시 나타납니다. 새로 고침하면 이런 일이 발생합니다. 닫기를 클릭하면 모달 폼과 오버레이가 제거됩니다.

그런 다음 닫는 기능을 활성화하려고했지만 아무리 시도해도 문제가 발생하지 않습니다.

다른 모든 기능은 정상입니다. 누구든지 올바른 방향으로 나를 가리킬 수 있습니까?

Answer 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; 
     }); 
    }); 
}); 

Answer 2

$ ('# close') 선택기에 오류가 있습니다. 대신 $ ('. 닫기') 또는 $ ('# closeIt')을 사용하십시오. 닫기 버튼을 선택

에서