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

<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:

Can we use this modal with with navbar-fixed-top ??????
not working within this <nav class="navbar navbar-inverse navbar-fixed-top">

Veenit Kumar () - 7 years ago - Reply -1


Can anybody helps me?,, i use this login but it doesnt works with my MySQL database.
i dont know how to work with JS. So if anybody can help me, i will be really thankful.

Kerem () - 7 years ago - Reply 0


how can i add post method i add php file but i am not able to save it in my database

Utkarsh Jaiswal () - 7 years ago - Reply 0


hello sir when i copy css code html code and jcs file login form proper work but registre form can not open

Amarkant semwal () - 7 years ago - Reply 0


good

hoang cong () - 7 years ago - Reply 0


hello Everyone!
it looks very well but i have a problem.. if i open the modal login, i cant click on the modal or use it. if i click on the modal or anywhere it will close the modal.. it looks like the modal is in the background.

does anyone understand my problem? :)

thx for help

Jey Doub () - 7 years ago - Reply 0


using <nav class="navbar navbar-inverse navbar-fixed-top"> ??????//

Veenit Kumar () - 7 years ago - Reply 0


I'm facing the same problem. I added it into a navbar class. Please Veenit Kumar, is that the source of problem ?

Boom_ Jack () - 6 years ago - Reply 0


Working well with the latest Version of Umbraco CMS (7.5).
I get no errors and its all opening like its supposed to.

Aaron Reitz () - 7 years ago - Reply 0


Anyone can help me? this snippet is not working... I think it is my mistake. If anyone please contact me
Thank you

Mayura Lakshitha Hettiarachchi () - 7 years ago - Reply 0


Hi, again
i use a "login" and a "register" button on my page-menu... how to make "register-form" immediately shown on click on "register-botton"?

vipfafen () - 8 years ago - Reply 0


I did this and it's working pretty good:
Register

Matteo Bunino () - 7 years ago - Reply 0


Hi
How you can do that ?

Hussein Alyones () - 7 years ago - Reply 0


should i splitt the code? separate file for the login window? at the moment i have one html file for the whole stuff (540 lines of html)

vipfafen () - 8 years ago - Reply 0


Hi everyone,
The snippet is very good.
But i am having a problem, the login form is opening. but, when i click on the REGISTER or FORGOT PASSWORD button on the login form, they are not working.
Someone Please help me with this, as i am stuck at this point.

i am using this snippet in my layout page, so that it is available on all the pages.
i tried testing the code with a debugger, but as far as i know, on click of the register and forgot password button, the JS code is not being read.

additional info- i am using .net 4.0 framework (Visual Studios, MVC 4) and my view is Razor.

Akshat Tripathi () - 8 years ago - Reply 0


use bootstrap 3 css and bootstrap 4 script and and in the body tag add <script> and paste the script from here then it will work fine

Utkarsh Jaiswal () - 7 years ago - Reply 0


Thanks for the reply, but it's ridiculous to give an incomplete answer, an example syntax would have helped, or just don't answer at all.

Hayder Aero () - 6 years ago - Reply 0


Has anyone found a solution to this?

Adam Dedanga () - 7 years ago - Reply 0


use bootstrap 3 css and bootstrap 4 script and and in the body tag add <script> and paste the script from here then it will work fine

Utkarsh Jaiswal () - 7 years ago - Reply 0


Thanks for your reply, can you clarify the exact syntax?

Simon () - 7 years ago - Reply 0


Hi

Very nice snippet. Thanks a lot.

I modified your modalAnimate function to focus on the first input field which I think is good UX.:

$newForm.fadeToggle($modalAnimateTime, function(){

$("input",$newForm).first().focus();

});

You can also ensure the first input has focus on initial load by adding this:

$('.modal').on('shown.bs.modal', function() {

$(".modal input").first().focus();

})

But a great snippet - thanks for sharing it.

Rick Jordan () - 8 years ago - Reply 0


how can i make this work? purely for testing

} else {

msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK") ;

window.location="dashboard.php";

So after an OK i will go to dashboard.php?

Winston With () - 8 years ago - Reply 0


never mind it worked

Winston With () - 8 years ago - Reply 0


lesson learned i guess; try first

Mathieu Aubin () - 8 years ago - Reply 0


Even after adding <script> tag i am not able to get the pop-up

Thi Ru () - 8 years ago - Reply 0


add script file in the body

Utkarsh Jaiswal () - 7 years ago - Reply 0


very cool

FR AN () - 8 years ago - Reply 0


It stops all forms from being submitted. It's technically broken.

Hakam () - 8 years ago - Reply 0


Line 21 in the Javascript file... $("form").submit(function () {

Replace "form" with your form element.

Adrian () - 8 years ago - Reply 0


how can i add post method

Utkarsh Jaiswal () - 7 years ago - Reply 0


Hello When I click the open login the dialog didn't poop up.

Talha Khan () - 8 years ago - Reply 0


Thank god it didn't poop ! But more seriously ... did you link your page to the js file ? Add something like : <script src="js/modal.js" type="text/javascript"></script> to the page

Gabriel B. Miller () - 8 years ago - Reply 0