<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Login modal</title>
</head>
<body>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg btn-modal" data-toggle="modal" data-target="#myModal" data-tab="login">Log In</button>
<span>or</span>
<button type="button" class="btn btn-primary btn-lg btn-modal" data-toggle="modal" data-target="#myModal" data-tab="register">Register</button>
<hr />
<p>Each button opens its corresponding tab in the modal window.</p>
<p>Click on "Forgot Password" to expand form</p>
<p>Clicking on "Already a Customer?" will change form layout for the existing customers.</p>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#login" aria-controls="login" role="tab" data-toggle="tab">Account Login</a></li>
<li role="presentation"><a href="#register" aria-controls="register" role="tab" data-toggle="tab">Create an Account</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="login">
<div class="modal-header">
<h5>If you already have an online account, please enter your email address and password below.</h5>
</div>
<div class="modal-body">
<form data-parsley-validate>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email" data-parsley-trigger="change" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" data-parsley-trigger="change" required>
</div>
<button type="submit" class="btn btn-grey">Log in Now</button>
</form>
</div>
<div class="modal-footer">
<h5>Forgot your password?</h5>
<p><a class="" role="button" data-toggle="collapse" href="#forgot-password-collapse" aria-expanded="false" aria-controls="forgot-password-collapse">Click here</a> to have a new one sent to you.</p>
<div class="collapse" id="forgot-password-collapse">
<h5>Password Assistance</h5>
<p>Please enter the email address you used to create your WSJwine account, and we will send a new password.</p>
<form>
<div class="form-group">
<label for="forgot-password-email">Email address</label>
<input type="email" class="form-control" id="forgot-password-email" placeholder="Email">
</div>
<button type="submit" class="btn btn-grey">Send me my password</button>
</form>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="register">
<div class="modal-header">
<h5>New Account Registration</h5>
</div>
<div class="modal-body">
<form class="row">
<div class="form-group col-sm-6">
<label for="first-name">First Name</label>
<input type="text" class="form-control" id="first-name" placeholder="First Name">
</div>
<div class="form-group col-sm-6">
<label for="last-name">Last Name</label>
<input type="text" class="form-control" id="last-name" placeholder="Last Name">
</div>
<div class="checkbox col-xs-12">
<label>
<input type="checkbox" id="customer-type"> Already a Customer?
</label>
</div>
<div class="new-customer clearfix">
<div class="form-group col-sm-6">
<label for="email-address">Email Address</label>
<input type="email" class="form-control" id="email-address" placeholder="Email">
</div>
<div class="form-group col-sm-6">
<label for="confirm-first-name">Confirm Email Address</label>
<input type="email" class="form-control" id="confirm-first-name" placeholder="Email">
</div>
<div class="form-group col-sm-6">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group col-sm-6">
<label for="confirm-password">Confirm Password</label>
<input type="password" class="form-control" id="confirm-password" placeholder="Password">
</div>
<small class="col-xs-12">Password must be a minimum of 8 characters and contain at least 1 number and 1 letter.</small>
<div class="checkbox col-xs-12">
<label>
<input type="checkbox"> I would like to receive special wine offers, shipment tracking info and order status updates
</label>
</div>
<div class="form-group col-sm-12">
<label for="company-name">Company Name</label>
<input type="text" class="form-control" id="company-name" placeholder="Company Name">
</div>
<div class="form-group col-sm-12">
<label for="address-one">Address 1</label>
<input type="text" class="form-control" id="address-one" placeholder="House #, Street">
</div>
<div class="form-group col-sm-12">
<label for="address-two">Address 2</label>
<input type="text" class="form-control" id="address-two" placeholder="Apt./Unit #">
</div>
<div class="form-group col-sm-3">
<label for="zip-code">Zip Code</label>
<input type="tel" class="form-control" id="zip-code" placeholder="5 digit zip">
</div>
<div class="form-group col-sm-6">
<label for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="City, Town">
</div>
<div class="form-group col-sm-3">
<label for="state">State</label>
<input type="text" class="form-control" id="state" placeholder="State">
</div>
<div class="form-group col-sm-6">
<label for="phone">Phone</label>
<input type="tel" class="form-control" id="phone" placeholder="Phone number">
</div>
</div>
<div class="existing-customer clearfix">
<div class="form-group col-sm-6">
<label for="customer-number">Customer #:</label>
<input type="tel" class="form-control" id="customer-number" placeholder="Your Customer Number">
</div>
<div class="form-group col-sm-6">
<label for="zip-code">Zip Code</label>
<input type="tel" class="form-control" id="zip-code" placeholder="5 digit zip">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-grey create-account">Create Account</button>
<button type="submit" class="btn btn-grey verify-account hide">Verify Account</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body {
height: 100%;
}
.btn-modal {
margin: 2em;
}
.btn {
border-radius: 0;
border: none;
-webkit-transition: background-color ease-out 0.5s;
-moz-transition: background-color ease-out 0.5s;
-o-transition: background-color ease-out 0.5s;
transition: background-color ease-out 0.5s;
&:hover {
-webkit-transition: box-shadow ease-out 0.3s;
-moz-transition: box-shadow ease-out 0.3s;
-o-transition: box-shadow ease-out 0.3s;
transition: box-shadow ease-out 0.3s;
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
}
.btn-grey {
background: #797979;
color: #fff;
&:hover {
background: #575757;
color: #fff;
}
}
.close {
opacity: 0.4;
position: absolute;
right: 10px;
top: 5px;
z-index: 1;
}
.form-control {
border-radius: 0;
box-shadow: none;
&:focus {
box-shadow: none;
border-color: #999;
}
}
#myModal {
.modal-dialog {
/* max-width: 580px; */
}
.modal-content {
border-radius: 0;
border: none;
form {
label {
font-weight: normal;
margin-bottom: 2px;
}
}
}
.modal-footer {
text-align: left;
}
}
.nav-tabs {
&>li {
width: 50%;
a {
margin: 0;
border-radius: 0;
text-align: center;
font-weight: 600;
}
}
}
/* Optional Styling */
.nav-tabs>li>a {
background-color: #ccc;
color: #666;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus {
background-color: #f7f7f7;
color: #5a5a5a;
}
.modal-content {
background-color: #f7f7f7;
}
/*.form-control {
border: none;
}
*/
/* Form validation */
.parsley-error {
border-color: #c00;
color: #c00;
background-color: #FFD9D9;
}
/* Forgot Password Section */
#forgot-password-collapse {
border-top: 2px dashed #999;
margin-top: 30px;
h5 {
margin-top: 15px;
}
form {
margin-top: 20px;
}
}
.existing-customer {
display: none;
}
View Compiled
$(document).ready(function() {
// Open active tab based on button clicked
$('.btn-modal').on('click', function() {
var switchTab = $(this).data('tab');
activaTab(switchTab);
function activaTab(switchTab) {
$('.nav-tabs a[href="#' + switchTab + '"]').tab('show');
};
});
// Toggle New/Existing Customer
var custType = $('#customer-type'),
newCust = $('.new-customer'),
existCust = $('.existing-customer'),
createAccBtn = $('.create-account'),
verifyAccBtn = $('.verify-account');
custType.val($(this).is(':checked'))
.change(function() {
if ($(this).is(':checked')) {
newCust.fadeToggle(400, function() { // Hide Full form when checked
existCust.fadeToggle(500); //Display Small form when checked
createAccBtn.toggleClass('hide');
verifyAccBtn.toggleClass('hide');
});
} else {
existCust.fadeToggle(400, function() { //Hide Small form when unchecked
newCust.fadeToggle(500); //Display Full form when unchecked
createAccBtn.toggleClass('hide');
verifyAccBtn.toggleClass('hide');
});
}
});
});
