In this tutorial we are going to see how to design login modal bootstrap. Someone is requested tutorial on this Bootsrap login modal popup i.e. exactly in my blog.
please check following tutorial on Bootstrap login modal popup.
Bootstrap Login Modal Popup with Facebook, Twitter, Google and Linkdin Login Buttons
Login Modal Bootsrap:
Create index.html file and please add following js and css files in your html file.
CSS files.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
JS files.
<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>
Design Login, Sing Up & Forget Pasword Modal Form Using Bootstrap:
In this modal login form using jQuery and Bootsrap, I had used Bootsrap Tabs to keep Login, Sign Up and Foregt Password Forms in single modal.
Here is HMTL markup for this bootstrap login modal tutorial.
<!-- -Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content login-modal">
<div class="modal-header login-modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center" id="loginModalLabel">USER AUTHENTICATION</h4>
</div>
<div class="modal-body">
<div class="text-center">
<div role="tabpanel" class="login-tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a id="signin-taba" href="#home" aria-controls="home" role="tab" data-toggle="tab">Sign In</a></li>
<li role="presentation"><a id="signup-taba" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Sign Up</a></li>
<li role="presentation"><a id="forgetpass-taba" href="#forget_password" aria-controls="forget_password" role="tab" data-toggle="tab">Forget Password</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active text-center" id="home">
<span id="login_fail" class="response_error" style="display: none;">Loggin failed, please try again.</span>
<div class="clearfix"></div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="login_username" placeholder="Username">
</div>
<span class="help-block has-error" id="email-error"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-lock"></i></div>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<span class="help-block has-error" id="password-error"></span>
</div>
<button type="button" id="login_btn" class="btn btn-block bt-login" data-loading-text="Signing In....">Login</button>
<div class="clearfix"></div>
<div class="login-modal-footer">
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8">
<i class="fa fa-lock"></i>
<a href="javascript:;" class="forgetpass-tab"> Forgot password? </a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<i class="fa fa-check"></i>
<a href="javascript:;" class="signup-tab"> Sign Up </a>
</div>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<span id="registration_fail" class="response_error" style="display: none;">Registration failed, please try again.</span>
<div class="clearfix"></div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<span class="help-block has-error" data-error='0' id="username-error"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="remail" placeholder="Email">
</div>
<span class="help-block has-error" data-error='0' id="remail-error"></span>
</div>
<button type="button" id="register_btn" class="btn btn-block bt-login" data-loading-text="Registering....">Register</button>
<div class="clearfix"></div>
<div class="login-modal-footer">
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8">
<i class="fa fa-lock"></i>
<a href="javascript:;" class="forgetpass-tab"> Forgot password? </a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<i class="fa fa-check"></i>
<a href="javascript:;" class="signin-tab"> Sign In </a>
</div>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane text-center" id="forget_password">
<span id="reset_fail" class="response_error" style="display: none;"></span>
<div class="clearfix"></div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="femail" placeholder="Email">
</div>
<span class="help-block has-error" data-error='0' id="femail-error"></span>
</div>
<button type="button" id="reset_btn" class="btn btn-block bt-login" data-loading-text="Please wait....">Forget Password</button>
<div class="clearfix"></div>
<div class="login-modal-footer">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<i class="fa fa-lock"></i>
<a href="javascript:;" class="signin-tab"> Sign In </a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<i class="fa fa-check"></i>
<a href="javascript:;" class="signup-tab"> Sign Up </a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- - Login Model Ends Here -->
Here is login modal box launcher button HMTL script.
<a class="btn btn-launch" href="javascript:;" data-toggle="modal" data-target="#loginModal"> Launch Login Modal Popup</a>
Bootstrap Tab Switch Using jQuery:
Switching tab between Login, sing up and forget password form is done with help of jQuery. Here is jQuery script to change Bootstrap Tab.
<script>
$(document).ready(function(){
$(document).on('click','.signup-tab',function(e){
e.preventDefault();
$('#signup-taba').tab('show');
});
$(document).on('click','.signin-tab',function(e){
e.preventDefault();
$('#signin-taba').tab('show');
});
$(document).on('click','.forgetpass-tab',function(e){
e.preventDefault();
$('#forgetpass-taba').tab('show');
});
});
</script>
Bootstrap Login Modal Popup CSS:
Here css for bootstrap login modal css.
.bt-login,.bt-login:hover, .bt-login:active, .bt-login:focus {
background-color: #ff8627;
color: #ffffff;
padding-bottom: 10px;
padding-top: 10px;
transition: background-color 300ms linear 0s;
}
.login-tab {
margin: 0 auto;
max-width: 380px;
}
.login-modal-header {
background: #27ae60;
color: #fff;
}
.login-modal-header .modal-title {
color: #fff;
}
.login-modal-header .close {
color: #fff;
}
.login-modal i {
color: #000;
}
.login-modal form {
max-width: 340px;
}
.tab-pane form {
margin: 0 auto;
}
.login-modal-footer{
margin-top:15px;
margin-bottom:15px;
}