"Modal Login with jQuery Effects"
Bootstrap 3.3.0 Snippet by sakcaba

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- BEGIN # BOOTSNIP INFO --> <div class="container"> <div class="row"> <h1 class="text-center">Modal Login with jQuery Effects</h1> <p class="text-center"><a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#login-modal">Open Login Modal</a></p> </div> </div> <!-- END # BOOTSNIP INFO --> <!-- BEGIN # MODAL LOGIN --> <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" align="center"> <img class="img-circle" id="img_logo" src="http://bootsnipp.com/img/logo.jpg"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </button> </div> <!-- Begin # DIV Form --> <div id="div-forms"> <!-- Begin # Login Form --> <form id="login-form"> <div class="modal-body"> <div id="div-login-msg"> <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div> <span id="text-login-msg">Type your username and password.</span> </div> <input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required> <input id="login_password" class="form-control" type="password" placeholder="Password" required> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> <div class="modal-footer"> <div> <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button> </div> <div> <button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button> <button id="login_register_btn" type="button" class="btn btn-link">Register</button> </div> </div> </form> <!-- End # Login Form --> <!-- Begin | Lost Password Form --> <form id="lost-form" style="display:none;"> <div class="modal-body"> <div id="div-lost-msg"> <div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div> <span id="text-lost-msg">Type your e-mail.</span> </div> <input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required> </div> <div class="modal-footer"> <div> <button type="submit" class="btn btn-primary btn-lg btn-block">Send</button> </div> <div> <button id="lost_login_btn" type="button" class="btn btn-link">Log In</button> <button id="lost_register_btn" type="button" class="btn btn-link">Register</button> </div> </div> </form> <!-- End | Lost Password Form --> <!-- Begin | Register Form --> <form id="register-form" style="display:none;"> <div class="modal-body"> <div id="div-register-msg"> <div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div> <span id="text-register-msg">Register an account.</span> </div> <input id="register_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required> <input id="register_email" class="form-control" type="text" placeholder="E-Mail" required> <input id="register_password" class="form-control" type="password" placeholder="Password" required> </div> <div class="modal-footer"> <div> <button type="submit" class="btn btn-primary btn-lg btn-block">Register</button> </div> <div> <button id="register_login_btn" type="button" class="btn btn-link">Log In</button> <button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button> </div> </div> </form> <!-- End | Register Form --> </div> <!-- End # DIV Form --> </div> </div> </div> <!-- END # MODAL LOGIN -->
/* ##################################################################### # # Project : Modal Login with jQuery Effects # Author : Rodrigo Amarante (rodrigockamarante) # Version : 1.0 # Created : 07/28/2015 # Last Change : 08/02/2015 # ##################################################################### */ @import url(http://fonts.googleapis.com/css?family=Roboto); * { font-family: 'Roboto', sans-serif; } #login-modal .modal-dialog { width: 350px; } #login-modal input[type=text], input[type=password] { margin-top: 10px; } #div-login-msg, #div-lost-msg, #div-register-msg { border: 1px solid #dadfe1; height: 30px; line-height: 28px; transition: all ease-in-out 500ms; } #div-login-msg.success, #div-lost-msg.success, #div-register-msg.success { border: 1px solid #68c3a3; background-color: #c8f7c5; } #div-login-msg.error, #div-lost-msg.error, #div-register-msg.error { border: 1px solid #eb575b; background-color: #ffcad1; } #icon-login-msg, #icon-lost-msg, #icon-register-msg { width: 30px; float: left; line-height: 28px; text-align: center; background-color: #dadfe1; margin-right: 5px; transition: all ease-in-out 500ms; } #icon-login-msg.success, #icon-lost-msg.success, #icon-register-msg.success { background-color: #68c3a3 !important; } #icon-login-msg.error, #icon-lost-msg.error, #icon-register-msg.error { background-color: #eb575b !important; } #img_logo { max-height: 100px; max-width: 100px; } /* ######################################### # override the bootstrap configs # ######################################### */ .modal-backdrop.in { filter: alpha(opacity=50); opacity: .8; } .modal-content { background-color: #ececec; border: 1px solid #bdc3c7; border-radius: 0px; outline: 0; } .modal-header { min-height: 16.43px; padding: 15px 15px 15px 15px; border-bottom: 0px; } .modal-body { position: relative; padding: 5px 15px 5px 15px; } .modal-footer { padding: 15px 15px 15px 15px; text-align: left; border-top: 0px; } .checkbox { margin-bottom: 0px; } .btn { border-radius: 0px; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; } .btn-lg, .btn-group-lg>.btn { border-radius: 0px; } .btn-link { padding: 5px 10px 0px 0px; color: #95a5a6; } .btn-link:hover, .btn-link:focus { color: #2c3e50; text-decoration: none; } .glyphicon { top: 0px; } .form-control { border-radius: 0px; }
/* ##################################################################### # # Project : Modal Login with jQuery Effects # Author : Rodrigo Amarante (rodrigockamarante) # Version : 1.0 # Created : 07/29/2015 # Last Change : 08/04/2015 # ##################################################################### */ $(function() { var $formLogin = $('#login-form'); var $formLost = $('#lost-form'); var $formRegister = $('#register-form'); var $divForms = $('#div-forms'); var $modalAnimateTime = 300; var $msgAnimateTime = 150; var $msgShowTime = 2000; $("form").submit(function () { switch(this.id) { case "login-form": var $lg_username=$('#login_username').val(); var $lg_password=$('#login_password').val(); if ($lg_username == "ERROR") { msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error"); } else { msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK"); } return false; break; case "lost-form": var $ls_email=$('#lost_email').val(); if ($ls_email == "ERROR") { msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error"); } else { msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK"); } return false; break; case "register-form": var $rg_username=$('#register_username').val(); var $rg_email=$('#register_email').val(); var $rg_password=$('#register_password').val(); if ($rg_username == "ERROR") { msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error"); } else { msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK"); } return false; break; default: return false; } return false; }); $('#login_register_btn').click( function () { modalAnimate($formLogin, $formRegister) }); $('#register_login_btn').click( function () { modalAnimate($formRegister, $formLogin); }); $('#login_lost_btn').click( function () { modalAnimate($formLogin, $formLost); }); $('#lost_login_btn').click( function () { modalAnimate($formLost, $formLogin); }); $('#lost_register_btn').click( function () { modalAnimate($formLost, $formRegister); }); $('#register_lost_btn').click( function () { modalAnimate($formRegister, $formLost); }); function modalAnimate ($oldForm, $newForm) { var $oldH = $oldForm.height(); var $newH = $newForm.height(); $divForms.css("height",$oldH); $oldForm.fadeToggle($modalAnimateTime, function(){ $divForms.animate({height: $newH}, $modalAnimateTime, function(){ $newForm.fadeToggle($modalAnimateTime); }); }); } function msgFade ($msgId, $msgText) { $msgId.fadeOut($msgAnimateTime, function() { $(this).text($msgText).fadeIn($msgAnimateTime); }); } function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) { var $msgOld = $divTag.text(); msgFade($textTag, $msgText); $divTag.addClass($divClass); $iconTag.removeClass("glyphicon-chevron-right"); $iconTag.addClass($iconClass + " " + $divClass); setTimeout(function() { msgFade($textTag, $msgOld); $divTag.removeClass($divClass); $iconTag.addClass("glyphicon-chevron-right"); $iconTag.removeClass($iconClass + " " + $divClass); }, $msgShowTime); } });

Related: See More


Questions / Comments: