How to Create a Popup in HTML, CSS and JavaScript
Hello, my friends in this video we will create an interactive and animated popup or modal without installing any third-party library, plugins or script just with HTML, CSS and JavaScript.
I hope this video helps you to clear your javascript concept and gather some tricks and tips from the video.
How to Create a Popup in HTML, CSS and JavaScript Part One Video
How to Create a Popup in HTML, CSS and JavaScript Part Two Video
Source Code:
Basic HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Keyboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- HTML code goes here -->
<script src="app.js"></script>
</body>
</html>HTML Code For Popup/Modal Structure:
<button class="button" onclick="open_modal('#modal_one')">
Open Modal
</button>
<div class="modal_wraper lg active" id="modal_one">
<div class="modal_container">
<div class="modal_header">
Modal One Header
<button class="close">
<i class="ion-close-round"></i>
</button>
</div>
<div class="modal_body">
<h3>What is Lorem Ipsum?</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="modal_footer">
Modal Footer
<button class="close btn">Close</button>
</div>
</div>
</div>CSS Code For Popup/Modal:
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
display: grid;
place-items: center;
min-height: 100vh;
}
.button {
background-color: #4caf50;
border: none;
padding: 8px 15px;
color: #fff;
font-size: 16px;
border-radius: 4px;
box-shadow: 0 2px 10px #0003;
outline: none;
cursor: pointer;
transition: 0.3s ease-in-out;
}
.button:hover {
filter: brightness(0.95);
box-shadow: 0 2px 15px #0006;
}
/* modal start */
.modal_wraper {
background-color: #0005;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999999;
display: grid;
place-items: center;
padding: 20px;
visibility: hidden;
opacity: 0;
transition: 0.3s ease-in-out;
}
.modal_wraper.active {
opacity: 1;
visibility: visible;
}
.modal_wraper .modal_container {
background-color: #fff;
max-width: 450px;
width: 100%;
border-radius: 5px;
overflow: hidden;
display: none;
box-shadow: 0 1px 6px #0001, 0 2px 10px #0002;
}
.modal_wraper.active .modal_container {
display: block;
animation-name: modal_open_animation;
animation-duration: 0.3s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
animation-delay: 0.4s;
}
@keyframes modal_open_animation {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.modal_wraper.modal_close_animation .modal_container {
animation-name: modal_close_animation;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes modal_close_animation {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
.modal_wraper.lg .modal_container {
max-width: 650px;
}
.modal_wraper.xl .modal_container {
max-width: 850px;
}
.modal_wraper .modal_container :is(.modal_header, .modal_footer) {
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: #000;
font-weight: bold;
}
.modal_wraper .modal_container :is(.modal_header, .modal_footer) > .close {
border: none;
background-color: transparent;
outline: none;
font-size: 16px;
cursor: pointer;
transition: 0.3s ease-in-out;
}
.modal_wraper .modal_container :is(.modal_header, .modal_footer) > .close i {
pointer-events: none;
}
.modal_wraper
.modal_container
:is(.modal_header, .modal_footer)
> .close:hover {
color: orangered;
}
.modal_wraper .modal_container .modal_footer > .close.btn {
background-color: orangered;
color: #fff;
padding: 8px 15px;
border-radius: 4px;
box-shadow: 0 2px 10px #0003;
}
.modal_wraper .modal_container .modal_footer > .close.btn:hover {
filter: brightness(0.95);
box-shadow: 0 2px 15px #0006;
}
.modal_wraper .modal_container .modal_body {
border-top: 1px solid #0002;
border-bottom: 1px solid #0002;
padding: 20px;
max-height: 80vh;
overflow-y: auto;
line-height: 1.8;
}
/* modal end */
JavaScript Code For Popup/Modal:
/* this method for open modal start */
function open_modal(modal_selector){
let modals = document.querySelectorAll(modal_selector);
modals.forEach(function(modal)
{
modal.classList.add('active');
});
}
/* this method for open modal end */
/* this method for close modal start */
window.addEventListener('click', function(e){
let status = false,
modal = '';
if(e.target.classList.contains('modal_wraper')){
status = true;
modal = e.target;
}
if(e.target.classList.contains('close') && e.target.closest('.modal_header,.modal_footer')){
status = true;
modal = e.target.closest('.modal_wraper.active');
}
if(status)
{
modal.classList.add("modal_close_animation");
let modal_container = modal.querySelector('.modal_container');
if(modal_container)
{
modal_container.addEventListener('animationend', function(e){
if(e.animationName == 'modal_close_animation')
{
modal.classList.remove('modal_close_animation');
modal.classList.remove('active');
}
});
}
}
});
/* this method for close modal end */Live Preview In Codepen:
Thank you for visiting my website, and to get this type of content please subscribe to my youtube channel.
More Article/Source Code:
Leave a Reply