Today In this article, we’ll show you how to create Responsive Popup Modal Design Using HTML, CSS and JavaScript. This type of Popup Modal is used on the websites For Modal. This kind of Popup Modal Design looks attractive on website.
You easily create this Responsive Popup Modal design Using HTML, CSS & JavaScript. then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS, and javascript then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Responsive Popup Modal
Basically, there is show modal button. When you click on the button then shows modal popup. The Popup Modal has the image with title and button with close icon. When you click close icon or link then you back button. The whole design is based on color and animation combination.
Preview Of Responsive Popup Modal
See this video preview to get an idea of how this Responsive Popup Modal design looks like.
Hopefully, the above demo has helped you to create this Responsive Popup Modal Tutorial. If you like the video, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Responsive Navigation Menu Bar in HTML & CSS
- Expandable Search Box Using HTML, CSS & JS
- Responsive Login Form Design using HTML & CSS
Responsive Popup Modal | Source Codes
To create this program (Popup Modal). First, you need to create three Files one HTML, CSS and another one is JS File. After creating these files just paste the following codes in your file.
After create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--=============== BOXICONS ===============-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css">
<!--=============== CSS ===============-->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Responsive Modal Popup</title>
</head>
<body>
<section class="modal container">
<button class="modal__button" id="open-modal">
Open Modal
</button>
<div class="modal__container" id="modal-container">
<div class="modal__content">
<div class="modal__close close-modal" title="Close">
<i class='bx bx-x'></i>
</div>
<img src="assets/img/star-trophy.png" alt="" class="modal__img">
<h1 class="modal__title">Good Job!</h1>
<p class="modal__description">Click the button to close</p>
<button class="modal__button modal__button-width">
View status
</button>
<button class="modal__button-link close-modal">
Close
</button>
</div>
</div>
</section>
<!--=============== MAIN JS ===============-->
<script src="assets/js/main.js"></script>
</body>
</html>After to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500&display=swap');
/*=============== VARIABLES CSS ===============*/
:root {
/*========== Colors ==========*/
--hue: 240;
--first-color: hsl(var(--hue), 16%, 18%);
--first-color-alt: hsl(var(--hue), 16%, 12%);
--title-color: hsl(var(--hue), 8%, 15%);
--text-color: hsl(var(--hue), 8%, 35%);
--body-color: hsl(var(--hue), 100%, 99%);
--container-color: #FFF;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--big-font-size: 1.5rem;
--normal-font-size: .938rem;
/*========== z index ==========*/
--z-modal: 1000;
}
@media screen and (min-width: 968px) {
:root {
--big-font-size: 1.75rem;
--normal-font-size: 1rem;
}
}
/*=============== BASE ===============*/
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body,
button{
font-family: var(--body-font);
font-size: var(--normal-font-size);
}
body{
background-color: var(--body-color);
color: var(--text-color);
position: relative;
}
button{
cursor: pointer;
border: none;
outline: none;
}
img{
max-width: 100%;
height: auto;
}
/*=============== MODAL ===============*/
.container{
margin-left: 1rem;
margin-right: 1rem;
}
.modal{
height: 100vh;
display: grid;
place-items: center;
}
.modal__button{
display: inline-block;
background-color: var(--first-color);
color: #FFF;
padding: 1rem 1.25rem;
border-radius: .5rem;
transition: .3s;
}
.modal__button:hover{
background-color: var(--first-color-alt);
}
.modal__container{
position: absolute;
top: 0;
left: 0;
background-color: hsla(var(--hue), 18%, 75%, .8);
width: 100%;
height: 100%;
display: grid;
align-items: flex-end;
overflow: hidden;
transition: all .3s;
z-index: var(--z-modal);
visibility: hidden;
opacity: 0;
/*=== Effect 3 ===*/
/* perspective: 1000px; */
}
.modal__content{
position: relative;
background-color: var(--container-color);
text-align: center;
padding: 3rem 2rem 2rem;
border-radius: 1rem 1rem 0 0;
transition: all .3s;
/*=== Effect 1 ===*/
transform: translateY(10%);
/*=== Effect 2 ===*/
/* transform: scale(.5) translateY(10%); */
/*=== Effect 3 ===*/
/* transform: rotateX(65deg) scale(.75) translateY(10%);
transform-origin: 50% 100%; */
}
.modal__img{
width: 150px;
margin-bottom: .75rem;
}
.modal__close{
display: inline-flex;
background-color: var(--first-color);
border-radius: .25rem;
color: #FFF;
font-size: 1.5rem;
position: absolute;
top: 2rem;
right: 2rem;
cursor: pointer;
}
.modal__title{
font-size: var(--big-font-size);
color: var(--title-color);
font-weight: 500;
}
.modal__description{
margin-bottom: 1.5rem;
}
.modal__button-width{
width: 90%;
}
.modal__button-link{
display: block;
margin: 1rem auto 0;
background-color: transparent;
color: var(--first-color);
font-weight: 500;
}
/* Show modal */
.show-modal{
visibility: visible;
opacity: 1;
}
.show-modal .modal__content{
/*=== Effect 1 ===*/
transform: translateY(0);
/*=== Effect 2 ===*/
/* transform: scale(1) translateY(0); */
/*=== Effect 3 ===*/
/* transform: rotateX(0) scale(1) translateY(0); */
}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (min-width: 576px){
.modal__content{
margin: auto;
width: 380px;
border-radius: 1.25rem;
}
.modal__img{
width: 170px;
}
}After to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
/*=============== SHOW MODAL ===============*/
const showModal = (openButton, modalContent) =>{
const openBtn = document.getElementById(openButton),
modalContainer = document.getElementById(modalContent)
if(openBtn && modalContainer){
openBtn.addEventListener('click', ()=>{
modalContainer.classList.add('show-modal')
})
}
}
showModal('open-modal','modal-container')
/*=============== CLOSE MODAL ===============*/
const closeBtn = document.querySelectorAll('.close-modal')
function closeModal(){
const modalContainer = document.getElementById('modal-container')
modalContainer.classList.remove('show-modal')
}
closeBtn.forEach(c => c.addEventListener('click', closeModal))now you’ve successfully created these Responsive Popup Modal. If your code does not work or facing any error/problem to comment down or contact us through the contact page. or you can download images and source codes below the download button.
