Cool Modal Popup animation with login and register forms
Created
February 10, 2020 04:59
-
-
Save mqxu/fbbc9c087679d17272d8288954e73701 to your computer and use it in GitHub Desktop.
Modal Popup with Login/Register Forms!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav> | |
<h1>Website Title</h1> | |
<ul> | |
<li class="active">Home</li> | |
<li>About</li> | |
<li>Contact Form</li> | |
</ul> | |
<div class="underline"></div> | |
</nav> | |
<div class="container"> | |
<button>Click Here</button> | |
</div> | |
<div class="overlay"> | |
</div> | |
<div class="main-popup"> | |
<div class="popup-header"> | |
<div id="popup-close-button"><a href="#"></a></div> | |
<ul> | |
<li><a href="#" id="sign-in">Sign In</a></li> | |
<li><a href="#" id="register">Register</a></li> | |
</ul> | |
</div><!--.popup-header--> | |
<div class="popup-content"> | |
<form action="#" class="sign-in"> | |
<label for="email">Email:</label> | |
<input type="text" id="email"> | |
<label for="password">Password:</label> | |
<input type="password" id="password"> | |
<p class="check-mark"> | |
<input type="checkbox" id="remember-me"> | |
<label for="remember-me">Remember me</label> | |
</p> | |
<input type="submit" id="submit" value="Submit"> | |
</form> | |
<form action="#" class="register"> | |
<label for="email-register">Email:</label> | |
<input type="text" id="email-register"> | |
<label for="password-register">Password:</label> | |
<input type="password" id="password-register"> | |
<label for="password-confirmation">Confirm Password:</label> | |
<input type="password-confirmation" id="password-confirmation"> | |
<p class="check-mark"> | |
<input type="checkbox" id="accept-terms"> | |
<label for="accept-terms">I agree to the <a href="#">Terms</a></label> | |
</p> | |
<input type="submit" id="submit" value="Create Account"> | |
</form> | |
</div><!--.popup-content--> | |
</div><!--.main-popup--> | |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*Title: Cool Modal Popup Sign In/Out Form*/ | |
$(function() { | |
//defining all needed variables | |
var $overlay = $('.overlay'); | |
var $mainPopUp = $('.main-popup') | |
var $signIn = $('#sign-in'); | |
var $register = $('#register'); | |
var $formSignIn = $('form.sign-in'); | |
var $formRegister = $('form.register'); | |
var $firstChild = $('nav ul li:first-child'); | |
var $secondChild = $('nav ul li:nth-child(2)'); | |
var $thirdChild = $('nav ul li:nth-child(3)'); | |
//defining function to create underline initial state on document load | |
function initialState() { | |
$('.underline').css({ | |
"width": $firstChild.width(), | |
"left": $firstChild.position().left, | |
"top": $firstChild.position().top + $firstChild.outerHeight(true) + 'px' | |
}); | |
} | |
initialState(); //() used after calling function to call function immediately on doc load | |
//defining function to change underline depending on which li is active | |
function changeUnderline(el) { | |
$('.underline').css({ | |
"width": el.width(), | |
"left": el.position().left, | |
"top": el.position().top + el.outerHeight(true) + 'px' | |
}); | |
} //note: have not called the function...don't want it called immediately | |
$firstChild.on('click', function(){ | |
var el = $firstChild; | |
changeUnderline(el); //call the changeUnderline function with el as the perameter within the called function | |
$secondChild.removeClass('active'); | |
$thirdChild.removeClass('active'); | |
$(this).addClass('active'); | |
}); | |
$secondChild.on('click', function(){ | |
var el = $secondChild; | |
changeUnderline(el); //call the changeUnderline function with el as the perameter within the called function | |
$firstChild.removeClass('active'); | |
$thirdChild.removeClass('active'); | |
$(this).addClass('active'); | |
}); | |
$thirdChild.on('click', function(){ | |
var el = $thirdChild; | |
changeUnderline(el); //call the changeUnderline function with el as the perameter within the called function | |
$firstChild.removeClass('active'); | |
$secondChild.removeClass('active'); | |
$(this).addClass('active'); | |
}); | |
$('button').on('click', function(){ | |
$overlay.addClass('visible'); | |
$mainPopUp.addClass('visible'); | |
$signIn.addClass('active'); | |
$register.removeClass('active'); | |
$formRegister.removeClass('move-left'); | |
$formSignIn.removeClass('move-left'); | |
}); | |
$overlay.on('click', function(){ | |
$(this).removeClass('visible'); | |
$mainPopUp.removeClass('visible'); | |
}); | |
$('#popup-close-button a').on('click', function(e){ | |
e.preventDefault(); | |
$overlay.removeClass('visible'); | |
$mainPopUp.removeClass('visible'); | |
}); | |
$signIn.on('click', function(){ | |
$signIn.addClass('active'); | |
$register.removeClass('active'); | |
$formSignIn.removeClass('move-left'); | |
$formRegister.removeClass('move-left'); | |
}); | |
$register.on('click', function(){ | |
$signIn.removeClass('active'); | |
$register.addClass('active'); | |
$formSignIn.addClass('move-left'); | |
$formRegister.addClass('move-left'); | |
}); | |
$('input').on('submit', function(e){ | |
e.preventDefault(); //used to prevent submission of form...remove for real use | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body, * { | |
box-sizing: border-box; | |
} | |
nav { | |
height: 60px; | |
} | |
nav h1 { | |
float: left; | |
margin: 10px 0 0 30px; | |
font-size: 2em; | |
} | |
nav ul { | |
float: right; | |
} | |
nav ul li { | |
display: inline-block; | |
list-style: none; | |
margin: 0 0 3px 0; | |
padding-right: 10px; | |
cursor: pointer; | |
color: #ccc; | |
transition: all 0.5s ease; | |
} | |
nav ul li:hover { | |
color: #000; | |
} | |
nav ul li:last-child { | |
margin-right: 20px; | |
} | |
nav ul li.active { | |
color: #000; | |
} | |
.underline { | |
position: absolute; | |
height: 4px; | |
background-color: #ceaee8; | |
transition: all 0.5s ease; | |
} | |
.container { | |
width: 100%; | |
height: 100vh; | |
background-color: #e7e7f6; | |
border-radius: 5px; | |
z-index: 2; | |
} | |
button { | |
position: relative; | |
left: 50%; | |
top: 50%; | |
height: 70px; | |
width: 200px; | |
margin: -35px 0 0 -100px; | |
padding: 15px 30px; | |
border-radius: 5px; | |
background-color: #ceaee8; | |
color: #fff; | |
font-size: 1.5em; | |
cursor: pointer; | |
-webkit-transition: all 0.5s ease; | |
-moz-transition: all 0.5s ease; | |
-o-transition: all 0.5s ease; | |
transition: all 0.5s ease; | |
outline: none; | |
} | |
button:hover { | |
opacity 0.8; | |
box-shadow: 0 2px 5px #9a9a9a; | |
} | |
.overlay { | |
position: fixed; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
background-color: rgba(0,0,0,0.5); | |
z-index: 10; | |
opacity: 0; | |
visibility: hidden; | |
transition: all .5s ease; | |
} | |
.overlay.visible { | |
opacity: 1; | |
visibility: visible; | |
} | |
.main-popup { | |
position: fixed; | |
left: 0; | |
top: 30px; | |
margin: 0; | |
width: 100%; | |
height: 450px; | |
background-color: #e7e7f6; | |
border-radius: 5px; | |
z-index: 15; | |
opacity: 0; | |
visibility: hidden; | |
transform: translateY(-20px); | |
transition: all .5s ease; | |
/*overflow: hidden;*/ | |
} | |
.main-popup.visible { | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(10px); | |
transition: all .5s ease; | |
} | |
@media (min-width: 500px) { | |
.main-popup { | |
width: 500px; | |
left: 50%; | |
margin: 0 0 0 -250px; | |
} | |
} | |
.popup-header { | |
position: relative; | |
padding: 0; | |
margin: 0; | |
height: 62px; | |
width: 100%; | |
} | |
#popup-close-button a { | |
position: absolute; | |
right: 10px; | |
top: -30px; | |
width: 22px; | |
height: 22px; | |
} | |
#popup-close-button a::before { | |
content: ''; | |
position: absolute; | |
right: 10px; | |
top: 0; | |
width: 3px; | |
height: 25px; | |
background-color: #fff; | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
-o-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} | |
#popup-close-button a::after { | |
content: ''; | |
position: absolute; | |
right: 10px; | |
top: 0; | |
width: 3px; | |
height: 25px; | |
background-color: #fff; | |
-webkit-transform: rotate(-45deg); | |
-moz-transform: rotate(-45deg); | |
-ms-transform: rotate(-45deg); | |
-o-transform: rotate(-45deg); | |
transform: rotate(-45deg); | |
} | |
.popup-header ul { | |
margin: 0; | |
padding: 0; | |
} | |
.popup-header ul li { | |
text-align: center; | |
list-style: none; | |
width: 50%; | |
float: left; | |
} | |
.popup-header ul li a { | |
display: block; | |
padding: 20px 0; | |
margin: 0; | |
text-decoration: none; | |
font-size: 1.2em; | |
} | |
#sign-in { | |
background-color: #ceaee8; | |
color: #fff; | |
border-radius: 5px 0 0 0; | |
} | |
#sign-in.active { | |
color: #ceaee8; | |
background-color: transparent; | |
} | |
#register { | |
background-color: #ceaee8; | |
color: #fff; | |
border-radius: 0 5px 0 0; | |
} | |
#register.active { | |
color: #ceaee8; | |
background-color: transparent; | |
} | |
.popup-content { | |
height: 400px; | |
overflow: hidden; | |
} | |
form.sign-in { | |
position: relative; | |
top: 40px; | |
left: 0; | |
font-size: 1em; | |
opacity: 1; | |
-webkit-transition: all .35s; | |
-moz-transition: all .35s; | |
-o-transition: all .35s; | |
transition: all .35s; | |
} | |
form.sign-in.move-left { | |
opacity: 0; | |
transform: translateX(-450px); | |
} | |
form label { | |
font-size: 1.1em; | |
color: #ceaee8; | |
margin-left: 23px; | |
} | |
form.sign-in input { | |
border-radius: 5px; | |
width: 90%; | |
height: 40px; | |
margin: 5px 5% 30px 5%; | |
padding: 10px; | |
font-size: 1em; | |
color: #ceaee8; | |
outline: none; | |
border: none; | |
} | |
input#submit { | |
background-color: #ceaee8; | |
color: #fff; | |
height: 50px; | |
width: 90%; | |
margin-left: 5%; | |
margin-right: 5%; | |
margin-top: 25px; | |
padding: 0; | |
cursor: pointer; | |
outline: none; | |
border-radius: 5px; | |
font-size: 1em; | |
border: none; | |
} | |
form.register { | |
position: relative; | |
top: -280px; | |
left: 0; | |
font-size: 1em; | |
opacity: 0; | |
transform: translateX(450px); | |
-webkit-transition: all .35s; | |
-moz-transition: all .35s; | |
-o-transition: all .35s; | |
transition: all .35s; | |
} | |
form.register.move-left { | |
opacity: 1; | |
transform: translateX(0); | |
} | |
form.register input { | |
border-radius: 5px; | |
width: 90%; | |
height: 40px; | |
margin: 5px 5% 15px 5%; | |
padding: 10px; | |
font-size: 1em; | |
color: #ceaee8; | |
outline: none; | |
border: none; | |
} | |
p.check-mark { | |
position: relative; | |
left: 50%; | |
width: 200px; | |
margin: 0 0 0 -100px; | |
padding: 0; | |
text-align: center; | |
color: #ceaee8; | |
font-size: .8em; | |
} | |
p.check-mark a { | |
color: #a48bb9; | |
} | |
p.check-mark input { | |
border-radius: 0; | |
width: auto; | |
height: auto; | |
margin: 0; | |
padding: 0; | |
font-size: 2em; | |
color: #ceaee8; | |
outline: none; | |
border: none; | |
} | |
p.check-mark label { | |
margin-left: 5px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment