Hello Coders! Welcome to JavaScript Animation Blog. In this, we're going to see how to create a Modal which shows a sign up form whenever we clicked on the button. It also disappears when you click somewhere else. This modal functionality is the mose widely used functionality of all. You can see this modal on every website. It shows user what will this button do and hence saves their time.
Here's a preview-
That being said, let us get started.
Step - 1: Like always, create 3 files - index.html , style.css and script.js.
Step - 2: Copy the below HTML code and paste it into your code editor.
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Modal Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="modal">
<div class="modal__content">
<h3>Sign Up Form</h3>
<span class="modal__placeholder">Email adress</span><input type="email">
<span class="modal__placeholder">Password</span><input type="password">
<span class="modal__forgot">Forgot your password?</span>
<button class="btn modal__btn close">Log In</button>
</div>
</div>
<div class="content">
<div class="content__section">
<button class="btn content__section__btn"> Click me!</button>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
Step - 3: Below is the CSS code for styling.
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
font-family: "Open Sans";
color: #B1B1B1;
}
html {
background-color: #b74096;
}
.btn {
display: inline-block;
border: none;
text-transform: uppercase;
cursor: pointer;
border-radius: 10px;
transition: all 0.2s;
}
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.content__section__btn {
font-size: 1rem;
padding: 1rem 3rem;
background-color: #fff8f0;
}
.content__section__btn:hover {
box-shadow: 0rem 0.5rem 0.7rem #f57ad2;
transform: translateY(-0.5rem);
}
.content__section__btn:active {
transform: translateY(-0.2rem);
box-shadow: 0rem 0.4rem 0.6rem #8f0a69;
}
.modal {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #b74096;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
transition: all 0.3s;
opacity: 0;
visibility: hidden;
}
.modal__content {
display: flex;
justify-items: center;
transform: translateY(-5rem);
transition: all 0.5s;
flex-direction: column;
background-color: white;
width: 50%;
border-radius: 15px;
}
.modal__content h3 {
align-self: center;
margin-top: 1rem;
margin-bottom: 1rem;
color: grey;
}
.modal__content > * {
margin: 0 1rem;
}
.modal__content > input {
height: 1.5rem;
border: none;
border-bottom: 1px solid #B1B1B1;
font-size: 0.7rem;
font-weight: 900;
margin-bottom: 1rem;
}
.modal__placeholder {
font-size: 0.6rem;
color: grey;
}
.modal__forgot {
font-size: 0.6rem;
align-self: center;
margin-bottom: 1rem;
transition: all 0.2s;
}
.modal__forgot:hover {
color: grey;
cursor: pointer;
}
.modal__btn {
justify-self: flex-end;
margin-bottom: 1rem;
border-radius: 10rem;
padding: 0.5rem 0.8rem;
background-color: #8f0a69;
color: white;
box-shadow: 0rem 0.4rem 1rem rgba(158, 158, 158, 0.6);
}
.modal__btn:hover {
box-shadow: 0rem 0.4rem 0.6rem rgba(158, 158, 158, 0.9);
}
.modal__btn:active {
transform: translateY(0.2rem);
box-shadow: 0rem 0.4rem 0.4rem #8f0a69;
}
.visible {
opacity: 1;
visibility: visible;
}
.position {
transform: translateY(0);
}
Step - 4: Below is the JS code for the functionality.
JS
var button = document.querySelector('.content__section__btn');
var modal = document.querySelector('.modal');
var modalContent = document.querySelector('.modal__content');
var email
var close = document.querySelector('.close');
var toggleVisibility = function(){
modal.classList.toggle('visible');
modalContent.classList.toggle('position');
}
button.addEventListener('click', toggleVisibility);
close.addEventListener('click', toggleVisibility);
//Exit Modal by clicking outside
document.addEventListener('click', e=>{
const div = e.target.closest("div").className;
if(div === 'modal visible'){
toggleVisibility();
}
})
And that's it. You're done.
Let me know in the comments if you have any doubt related to this.
Follow @creocodigo for more projects and web related content.
If you find this useful, below are some other posts that I am sure you'll love