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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* #####################################################################
#
# 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* #####################################################################
#
# 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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit Pro
arrow key navigation thumbnail gallery modal view
Fancy subscribe modal (md, lg) with delay functionality on page load
login-form

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 () - 8 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 () - 8 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 () - 8 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 () - 8 years ago - Reply 0

good

hoang cong () - 8 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 () - 8 years ago - Reply 0

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

Veenit Kumar () - 8 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 () - 7 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 () - 8 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 () - 8 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 () - 9 years ago - Reply 0

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

Matteo Bunino () - 8 years ago - Reply 0

Hi
How you can do that ?

Hussein Alyones () - 8 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 () - 9 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 () - 9 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 () - 8 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 () - 7 years ago - Reply 0

Has anyone found a solution to this?

Adam Dedanga () - 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 () - 8 years ago - Reply 0

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

Simon () - 8 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 () - 9 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 () - 9 years ago - Reply 0

never mind it worked

Winston With () - 9 years ago - Reply 0

lesson learned i guess; try first

Mathieu Aubin () - 9 years ago - Reply 0

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

Thi Ru () - 9 years ago - Reply 0

add script file in the body

Utkarsh Jaiswal () - 8 years ago - Reply 0

very cool

FR AN () - 9 years ago - Reply 0

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

Hakam () - 9 years ago - Reply 0

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

Replace "form" with your form element.

Adrian () - 9 years ago - Reply 0

how can i add post method

Utkarsh Jaiswal () - 8 years ago - Reply 0

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

Talha Khan () - 9 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 () - 9 years ago - Reply 0