See Live Demo DownloadGitHub
Couple of days ago I got a question from Joydeep Dutta on one of my
post. He asked about how to create popup login and signup form like in
the website “zomato.com”. I looked at the popup box there and i really
liked it. So i thought about recreating it from the scratch with my own
style.
And Since i am lazy, i started looking for a simplest way to create
this jQuery modal box for Popup Login and Signup. I searched for a
simple and light jQuery plugins for modal dialog box to use for this
demo.
While searching i came across lots of awesome jQuery plugins. And
then i found “leanModal.js” which was exactly the plugin i was looking
for. In this tutorial, i am going to teach you how to create simple
Popup modal Dialog box for login and signup form using leanModal.js and
HTML easily with little knowledge of javascript.
Let’s Get started
The HTML
Setting up the HTML head, Linking necessary files i am using
“leanModal.js” as our jQuery Modal plugin and Font awesome for icons.
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
|
Modal Trigger – A login button, It will open the modal when clicked.
|
|
<a id="modal_trigger" href="#modal" class="btn">Click here to Login or register</a>
|
Modal Container (Popup Box)
<div id="modal" class="popupContainer" style="display:none;">
<header class="popupHeader">
<span class="header_title">Login</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</header>
<section class="popupBody">
<! -- Here Goes all the Login and signup Forms -->
</section>
</div>
|
-
Markup for Social Login Box, “Connect with Google” and “Connect with Facebook” boxes and Login and Signup buttons.
<div class="social_login">
<div class="clearfix">
<a class="social_box fb" href="#"><span class="icon_title">Connect with
Facebook</span></a> <a class="social_box google" href="#"><span class=
"icon_title">Connect with Google</span></a>
</div>
<div class="centeredText">
<span>Or use your Email address</span>
</div>
<div class="action_btns">
<div class="one_half">
<a class="btn" href="#" id="login_form" name="login_form">Login</a>
</div>
<div class="one_half last">
<a class="btn" href="#" id="register_form" name=
"register_form">Sign up</a>
</div>
</div>
</div>
|
-
Markup for Login Form
<div class="user_login">
<form>
<label>Email / Username</label> <input type="text"><br>
<label>Password</label> <input type="password"><br>
<div class="checkbox">
<input id="remember" type="checkbox"> <label for=
"remember">Remember me on this computer</label>
</div>
<div class="action_btns">
<div class="one_half">
<a class="btn back_btn" href="#">Back</a>
</div>
<div class="one_half last">
<a class="btn btn_red" href="#">Login</a>
</div>
</div>
</form>
<a class="forgot_password" href="#">Forgot password?</a>
</div>
|
-
Markup for Sign up Form
<div class="user_register">
<form>
<label>Full Name</label> <input type="text"><br>
<label>Email Address</label> <input type="email"><br>
<label>Password</label> <input type="password"><br>
<div class="checkbox">
<input id="send_updates" type="checkbox"> <label for=
"send_updates">Send me occasional email updates</label>
</div>
<div class="action_btns">
<div class="one_half">
<a class="btn back_btn" href="#">Back</a>
</div>
<div class="one_half last">
<a class="btn btn_red" href="#">Register</a>
</div>
</div>
</form>
</div>
|
And the CSS
I am importing Google web fonts and using that font for the whole layout for this demo.
/* Importing Google Webfonts */
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,700italic,400italic);
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
color: #666;
}
|
These are the styles for overlay and Popup box/Modal. Just copy the whole
#lean_overlay styles as it is. You can modify the Popup box styles.
/* Overlay when Modal is open */
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
/* Modal box or Popup box */
.popupContainer{
position:absolute;
width:330px;
height: auto;
left:45%;
top:80px;
background: #FFF;
}
|
CSS styles for Buttons and 2 column grid that containers the login and Signup Button
#modal_trigger {
margin: 100px auto;
width: 100px;
display: block;
}
.btn {
padding: 10px 20px;
background: #F4F4F2;
}
.btn_red {
background: #ED6347;
color: #FFF;
}
.btn:hover {
background: #E4E4E2;
}
.btn_red:hover {
background: #C12B05;
}
a.btn {
color: #666;
text-align: center;
text-decoration: none;
}
a.btn_red {
color: #FFF;
}
.one_half {
width: 50%;
display: block;
float: left;
}
.one_half.last {
width: 45%;
margin-left: 5%;
}
|
-
Here are the styles for Rest of the modal box Modal header “popupHeader” and Modal body “popupBody”.
-
-
-
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
|
-
/* Popup Styles*/
.popupHeader {
font-size: 16px;
text-transform: uppercase;
}
.popupHeader {
background: #F4F4F2;
position: relative;
padding: 10px 20px;
border-bottom: 1px solid #DDD;
font-weight: bold;
}
.popupHeader .modal_close {
position: absolute;
right: 0;
top: 0;
padding: 10px 15px;
background: #E4E4E2;
cursor: pointer;
color: #aaa;
font-size: 16px;
}
.popupBody {
padding: 20px;
}
|
-
These are the styles for Social login boxes, the “Connect with Facebook” and “Connect with Google”.
-
-
-
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
-
/* Social Login Form */
.social_login .social_box {
display: block;
clear: both;
padding: 10px;
margin-bottom: 10px;
background: #F4F4F2;
overflow: hidden;
}
.social_login .icon {
display: block;
width: 10px;
padding: 5px 10px;
margin-right: 10px;
float: left;
color: #FFF;
font-size: 16px;
text-align: center;
}
.social_login .fb .icon {
background: #3B5998;
}
.social_login .google .icon {
background: #DD4B39;
}
.social_login .icon_title {
display: block;
padding: 5px 0;
float: left;
font-weight: bold;
font-size: 16px;
color: #777;
}
.social_login .social_box:hover {
background: #E4E4E2;
}
.centeredText {
text-align: center;
margin: 20px 0;
clear: both;
overflow: hidden;
text-transform: uppercase;
}
.action_btns {
clear: both;
overflow: hidden;
}
.action_btns a {
display: block;
}
|
-
And these are the styles for user login form, where users can login
with their email address or username. By default the login form is
hidden using “
display: none” property.
-
-
-
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
38
39
40
41
42
|
-
/* User Login Form */
.user_login {
display: none;
}
.user_login label {
display: block;
margin-bottom: 5px;
}
.user_login input[type="text"], .user_login input[type="email"], .user_login input[type="password"] {
display: block;
width: 90%;
padding: 10px;
border: 1px solid #DDD;
color: #666;
}
.user_login input[type="checkbox"] {
float: left;
margin-right: 5px;
}
.user_login input[type="checkbox"]+label {
float: left;
}
.user_login .checkbox {
margin-bottom: 10px;
clear: both;
overflow: hidden;
}
.forgot_password {
display: block;
margin: 20px 0 10px;
clear: both;
overflow: hidden;
text-decoration: none;
color: #ED6347;
}
|
-
These are the styles for the signup form, it pretty much uses the same styles as login form.
-
-
-
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
|
-
/* User Register Form */
.user_register {
display: none;
}
.user_register label {
display: block;
margin-bottom: 5px;
}
.user_register input[type="text"], .user_register input[type="email"], .user_register input[type="password"] {
display: block;
width: 90%;
padding: 10px;
border: 1px solid #DDD;
color: #666;
}
.user_register input[type="checkbox"] {
float: left;
margin-right: 5px;
}
.user_register input[type="checkbox"]+label {
float: left;
}
.user_register .checkbox {
margin-bottom: 10px;
clear: both;
overflow: hidden;
}
|
-
And the jQuery
Calling the modal through jQuery, insert the following codes inside the
script tags.
|
|
$("#modal_trigger").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
|
And Showing or Hiding Forms when clicked on particular buttons.
$(function () {
// Calling Login Form
$("#login_form").click(function () {
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#register_form").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function () {
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
})
|
If you want the Popup box/Modal to show when the page loads, use the
Modified JS file “leanModal-modified-for-onload.js”. I have attached
this file in the download as well.
I Hope you enjoyed the tutorial as much i did when writing it. Let me
know if you found this helpful on the comments below. I’d love to hear
your thoughts as well.
Comments
Post a Comment