Modal Popup Box with CSS and JavaScript

 Modal Popup Box with CSS and JavaScript

Welcome to Code With Random blog. In this blog, we learn how to create a Modal Popup Box with CSS and JavaScript. We use simple HTML, CSS and JavaScript for Modal Popup Box. I hope you enjoy our blog so let’s start with a basic HTML structure for the Modal Popup Box.

 

 Modal Popup Box with CSS and JavaScript
 Modal Popup Box with CSS and JavaScript

 

HTML Code For Modal Popup Box

Table of Contents

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- hero -->
<header class="hero">
<div class="banner">
<h1>modal project</h1>
<button class="btn modal-btn">
open modal
</button>
</div>
</header>
<!-- modal -->
<div class="modal-overlay">
<div class="modal-container">
<h3>modal content</h3>
<button class="close-btn"><i class="fas fa-times"></i></button>
</div>
</div>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>

 

There is all the HTML code for the Modal Popup Box. Now, you can see an output with Modal Popup Box then we’ll write CSS and JavaScript for Modal Popup Box.

Output

 

 Modal Popup Box with CSS and JavaScript
 Modal Popup Box with CSS and JavaScript

 

Best 15+ Bootstrap login forms

CSS Code For Modal Popup Box

/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* dark shades of primary color*/
--clr-primary-1: hsl(205, 86%, 17%);
--clr-primary-2: hsl(205, 77%, 27%);
--clr-primary-3: hsl(205, 72%, 37%);
--clr-primary-4: hsl(205, 63%, 48%);
/* primary/main color */
--clr-primary-5: #49a6e9;
/* --clr-primary-5: rgb(73, 166, 233); */
/* lighter shades of primary color */
--clr-primary-6: hsl(205, 89%, 70%);
--clr-primary-7: hsl(205, 90%, 76%);
--clr-primary-8: hsl(205, 86%, 81%);
--clr-primary-9: hsl(205, 90%, 88%);
--clr-primary-10: hsl(205, 100%, 96%);
/* darkest grey - used for headings */
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-2: hsl(211, 39%, 23%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-4: hsl(209, 28%, 39%);
/* grey used for paragraphs */
--clr-grey-5: hsl(210, 22%, 49%);
--clr-grey-6: hsl(209, 23%, 60%);
--clr-grey-7: hsl(211, 27%, 70%);
--clr-grey-8: hsl(210, 31%, 80%);
--clr-grey-9: hsl(212, 33%, 89%);
--clr-grey-10: hsl(210, 36%, 96%);
--clr-white: #fff;
--clr-red-dark: hsl(360, 67%, 44%);
--clr-red-light: hsl(360, 71%, 66%);
--clr-green-dark: hsl(125, 67%, 44%);
--clr-green-light: hsl(125, 71%, 66%);
--clr-black: #222;
--ff-primary: "Roboto", sans-serif;
--ff-secondary: "Open Sans", sans-serif;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--radius: 0.5rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 620px;
}
/*
===============
Global Styles
===============
*/
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-secondary);
background: var(--clr-grey-10);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
img:not(.logo) {
width: 100%;
}
img {
display: block;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
font-family: var(--ff-primary);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
.btn {
text-transform: uppercase;
background: transparent;
color: var(--clr-black);
padding: 0.375rem 0.75rem;
letter-spacing: var(--spacing);
display: inline-block;
transition: var(--transition);
font-size: 0.875rem;
border: 2px solid var(--clr-black);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
border-radius: var(--radius);
}
.btn:hover {
color: var(--clr-white);
background: var(--clr-black);
}
/* section */
.section {
padding: 5rem 0;
}
.section-center {
width: 90vw;
margin: 0 auto;
max-width: 1170px;
}
@media screen and (min-width: 992px) {
.section-center {
width: 95vw;
}
}
main {
min-height: 100vh;
display: grid;
place-items: center;
}
/*
===============
Modal
===============
*/
.hero {
min-height: 100vh;
background: url("./hero.jpeg") center/cover no-repeat;
display: grid;
place-items: center;
}
.banner {
background: var(--clr-white);
padding: 4rem 0;
border-radius: var(--radius);
box-shadow: var(--light-shadow);
text-align: center;
width: 90vw;
max-width: var(--fixed-width);
}
.modal-btn {
margin-top: 2rem;
background: var(--clr-primary-5);
border-color: var(--clr-primary-5);
color: var(--clr-white);
}
.modal-btn:hover {
background: transparent;
color: var(--clr-primary-5);
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(73, 166, 233, 0.5);
display: grid;
place-items: center;
transition: var(--transition);
visibility: hidden;
z-index: -10;
}
/* OPEN/CLOSE MODAL */
.open-modal {
visibility: visible;
z-index: 10;
}
.modal-container {
background: var(--clr-white);
border-radius: var(--radius);
width: 90vw;
height: 30vh;
max-width: var(--fixed-width);
text-align: center;
display: grid;
place-items: center;
position: relative;
}
.close-btn {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2rem;
background: transparent;
border-color: transparent;
color: var(--clr-red-dark);
cursor: pointer;
transition: var(--transition);
}
.close-btn:hover {
color: var(--clr-red-light);
transform: scale(1.3);
}

50+ Html ,Css &Javascript Projects With Source Code

CSS Updated output

 

 Modal Popup Box with CSS and JavaScript
 Modal Popup Box with CSS and JavaScript

JavaScript Code For Modal Popup Box

// select modal-btn,modal-overlay,close-btn
// listen for click events on modal-btn and close-btn
// when user clicks modal-btn add .open-modal to modal-overlay
// when user clicks close-btn remove .open-modal from modal-overlay
const modalBtn = document.querySelector(".modal-btn");
const modal = document.querySelector(".modal-overlay");
const closeBtn = document.querySelector(".close-btn");
modalBtn.addEventListener("click", function () {
modal.classList.add("open-modal");
});
closeBtn.addEventListener("click", function () {
modal.classList.remove("open-modal");
});

 

Final Output of Model Popup Box using JavaScript

 

 Modal Popup Box with CSS and JavaScript
 Modal Popup Box with CSS and JavaScript

 

 

 

Now we have completed our JavaScript section. Here is our updated output with JavaScript . Hope you like the Modal Popup Box. You can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank You For Visiting!!!

This post teaches us how to create a Modal Popup Box using simple HTML & CSS and JavaScript. If we had made a mistake or any confusion, please drop a comment we’ll reply or help you in easy learning.

Written by – Code With Random/Anki

Leave a Reply