Как сделать ajax окно авторизации?

[group=5]
<div class="user-block user-bloc-not-signed">
    <a href="#log_in" class="button open_modal">Вход</a><a href="#reg" class="reg open_modal">Регистрация</a>
</div>
[/group]

/*------------------ Popup ------------------------*/
$(document).ready(function() { 
    var overlay = $('#overlay'); 
    var open_modal = $('.open_modal'); 
    var close = $('.modal_close, #overlay'); 
    var modal = $('.modal_div');

     open_modal.click( function(event){ 
         event.preventDefault(); 
         var div = $(this).attr('href'); 
         overlay.fadeIn(400, 
             function(){ 
                 $(div) 
                     .css('display', 'block') 
                     .animate({opacity: 1, top: '45%'}, 200); 
         });
     });

     close.click( function(){ 
            modal 
             .animate({opacity: 0, top: '45%'}, 200, 
                 function(){ 
                     $(this).css('display', 'none');
                     overlay.fadeOut(400);
                 }
             );
     });
});

<div id="log_in" class="modal_div"> 
    <span class="modal_close"></span>
    <div>
        <h2>ВХОД</h2>
       
        <form class="" method="post">
            <div class="form-group">
                <p class="login"><input onfocus="this.placeholder = ''" placeholder="Логин" type="text" name="login_name" id="login_name"></p>
                <p class="pass"><input onfocus="this.placeholder = ''" placeholder="Пароль" type="password" name="login_password" id="login_password"></p>
            </div>
            <div class="form-enter flex-s-c">
                <button onclick="submit();" type="submit">Войти</button>
                <input name="login" type="hidden" id="login" value="submit">
            </div>
        </form>
    </div>
</div>