Animated pure js callback popup using css property - display
May 19, 2023
upd: May 14
2K
When a modal window is opened, it is assigned a property - display: block, then, after a while - opacity: 1, which allows you to animate the display: block property. When closing a window, it is assigned the property - opacity: 0, then the element is removed from the page with the property - display: none.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animated pure js callback popup using css property - display</title>
<link rel="stylesheet" href="./style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css>
</head>
<body>
<div class="title">
<h1>Animated pure js callback popup using css property - display</h1>
</div>
<div class="site_link">
<a href="https://shedov.top/" target="blank">SHEDOV.TOP</a>
</div>
<button class="callback_button">
<div class="callback_button_pulsation"></div>
<i class="fa fa-phone"> </i>
</button>
<div class="callback_wrap">
<div class="callback_window_wrap">
<div class="callback_window">
<button class="callback_window_button_close">
<i class="fa fa-times callback_window-button_close_icon" aria-hidden="true"></i>
</button>
<div class="callback_window_title">
<p>Request a call back</p>
</div>
<div class="callback_window_input_name">
<input id="username" type="text" name="callback_window_input_name" placeholder="Name" />
</div>
<div class="callback_window_input_phone">
<input type="text" id="phone" name="callback_window_input_phone"
onkeyup="this.value = this.value.replace(/[^+\d]/g, '');" placeholder="Phone number" />
</div>
<div class="callback_privacy_policy">
<div class="checkbox_callback_privacy_policy">
<input type="checkbox" id="accept-terms" />
</div>
<label class="callback_privacy_policy_label" for="accept-terms">
<p>I consent to the processing of my personal data.</p>
</label>
</div>
<div class="callback_send_button">
<button>
Send
</button>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>script.js
document.addEventListener("DOMContentLoaded", function () {
let callback_button = document.querySelector(".callback_button");
let callback_window = document.querySelector(".callback_window");
let callback_window_button_close = document.querySelector(
".callback_window_button_close"
);
let callback_wrap = document.querySelector(".callback_wrap");
callback_button.addEventListener("click", (e) => {
e.stopPropagation();
animateDisplay(
document.querySelector(".callback_wrap"),
"active",
"block",
300
);
document.getElementsByClassName("callback_button")[0].style =
"visibility: hidden";
document.getElementsByClassName("callback_button")[0].style =
"opacity: 0";
});
callback_window_button_close.addEventListener("click", (e) => {
e.stopPropagation();
animateDisplay(
document.querySelector(".callback_wrap"),
"active",
"block",
300
);
document.getElementsByClassName("callback_button")[0].style =
"visibility: visible";
document.getElementsByClassName("callback_button")[0].style =
"opacity: 1";
});
// Tracking a click outside of a modal window
document.addEventListener("click", (e) => {
let target = e.target;
let target_callback_window =
target == callback_window || callback_window.contains(target);
let target_callback_button = target == callback_button;
let callback_wrap_active = callback_wrap.classList.contains("active");
if (
!target_callback_window &&
!target_callback_button &&
callback_wrap_active
) {
animateDisplay(
document.querySelector(".callback_wrap"),
"active",
"block",
300
);
document.getElementsByClassName("callback_button")[0].style =
"visibility: visible";
document.getElementsByClassName("callback_button")[0].style =
"opacity: 1";
}
});
// Animation function
function animateDisplay(target, animationClass, displayType, timeout) {
let doneTimedDisplay = false,
displaying = false;
target.addEventListener("transitionend", function () {
if (!target.classList.contains("active")) {
target.style.display = "none";
}
doneTimedDisplay = true;
});
if (!target.style.display || target.style.display === "none") {
displaying = true;
target.style.display = displayType;
} else {
displaying = false;
}
setTimeout(function () {
target.classList.toggle(animationClass);
doneTimedDisplay = false;
}, 10);
if (!displaying) {
setTimeout(function () {
if (!doneTimedDisplay) {
target.style.display = "none";
}
doneTimedDisplay = true;
}, timeout);
}
}
});
style.css
* {
text-decoration: none;
}
ul[class],
ol[class] {
padding: 0;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fade-in {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
@-o-keyframes fade-in {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
body {
-webkit-animation: fade-in 700ms linear;
-moz-animation: fade-in 700ms linear;
-o-animation: fade-in 700ms linear;
animation: fade-in 700ms linear;
}
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.callback_button {
position: fixed;
right: 30px;
bottom: 50px;
border-radius: 50%;
background-color: rgb(223 179 58 / 39%);
color: rgb(255, 255, 255);
width: 80px;
height: 80px;
display: flex;
justify-content: center;
cursor: pointer;
transform: rotate(100deg);
align-items: center;
opacity: 1;
transition: all 300ms ease;
visibility: visible;
border: none;
}
.callback_button i {
font-size: 40px;
animation-name: joomly-callback-tossing;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
@keyframes joomly-callback-tossing {
0% {
transform: rotate(-8deg);
}
50% {
transform: rotate(8deg);
}
100% {
transform: rotate(-8deg);
}
}
.callback_button_pulsation {
width: 95px;
height: 95px;
background: rgba(200, 158, 30, 0.504);
border-radius: 50%;
transform: scale(0.85);
animation: pulse 2s ease-in-out infinite;
position: absolute;
}
@keyframes pulse {
from {
transform: scale(0.85);
}
50% {
transform: scale(1.1);
}
to {
transform: scale(0.85);
}
}
.callback_wrap {
display: none;
opacity: 0;
transition: all 300ms ease;
}
.callback_wrap.active {
opacity: 1;
display: block;
transition: all 300ms ease;
}
.callback_window_wrap {
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 14%);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
}
.callback_window {
border-radius: 8px;
width: 100%;
max-width: 300px;
background: rgb(255, 255, 255);
margin-left: 20px;
margin-right: 20px;
position: relative;
}
.callback_window_button_close {
position: absolute;
top: -9px;
right: -8px;
cursor: pointer;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border: 2px solid #1f1e1e !important;
padding: 2px;
transition: all 300ms ease;
}
.callback_window_button_close i {
font-size: 21px;
color: #1f1e1e;
transition: all 300ms ease;
}
.callback_window-button_close_icon {
transition: all 500ms ease;
}
.callback_window_button_close:hover .callback_window-button_close_icon {
color: #1f1e1e;
transition: all 500ms ease;
transform: rotate(360deg);
}
.callback_privacy_policy {
display: flex;
justify-content: center;
align-items: center;
padding-top: 5px;
padding-bottom: 11px;
}
.checkbox_callback_privacy_policy {
display: flex;
justify-content: center;
align-items: center;
padding-left: 5px;
cursor: pointer;
}
.callback_privacy_policy_label {
text-align: left;
font-size: 12px;
color: #000000;
margin-left: 5px;
margin-right: 5px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
.callback_window_title {
background-color: #1f1e1e;
cursor: default;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.callback_window_title p {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
padding: 5px;
color: rgb(255, 255, 255);
}
.callback_window_input_name {
display: flex;
justify-content: center;
padding-top: 17px;
}
.callback_window_input_name::placeholder {
font-family: Arial, Helvetica, sans-serif;
color: rgb(79, 78, 78);
}
input {
outline: none;
}
.callback_window_input_name input {
transition: all 500ms ease;
width: 100%;
max-width: 190px;
font-family: Arial, Helvetica, sans-serif;
height: 25px;
padding-left: 15px;
border: 2px solid #1f1e1e;
border-radius: 20px;
resize: none;
background-color: transparent;
color: #000000;
transition: all 500ms ease;
font-size: 15px;
font-weight: 400;
line-height: 18px;
text-decoration: none;
}
.callback_window_input_phone {
display: flex;
justify-content: center;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.callback_window_input_phone::placeholder {
font-family: Arial, Helvetica, sans-serif;
color: rgb(79, 78, 78);
}
.callback_window_input_phone input {
font-family: Arial, Helvetica, sans-serif;
transition: all 500ms ease;
margin-bottom: 6px;
width: 100%;
max-width: 190px;
margin-top: 10px;
height: 25px;
padding-left: 15px;
border: 2px solid #1f1e1e;
border-radius: 20px;
resize: none;
background-color: transparent;
color: #000000;
margin-bottom: 10px;
transition: all 500ms ease;
font-size: 15px;
font-weight: 400;
line-height: 18px;
text-decoration: none;
}
.callback_send_button {
display: flex;
justify-content: center;
}
.callback_send_button button {
display: flex;
align-items: center;
cursor: pointer;
border-radius: 25px;
height: 30px;
background: #1f1e1e;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 15px;
color: #fff;
font-weight: bold;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
transition: all 500ms ease;
padding-left: 10px;
padding-right: 10px;
}
.callback_send_button button:hover {
background: rgb(53, 53, 53);
transition: all 500ms ease;
}
.title {
margin-left: 20px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 10px;
}
.title h1 {
font-size: 35px;
text-align: center;
color: rgb(26, 26, 26);
font-family: "Trebuchet MS";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.site_link {
text-align: center;
margin-left: 20px;
margin-right: 20px;
}
.site_link a {
font-size: 20px;
color: rgb(0, 0, 0);
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
margin-top: 0px;
margin-bottom: 0px;
transition: all 300ms ease;
}
@media (min-width: 1000px) {
.site_link a:hover {
color: rgb(80, 79, 79);
transition: all 300ms ease;
}
}
Share
Comment on