Ru
Ru

Animated pure js callback popup using css property – display

19.05.2023

animated pure js callback popup using the display css property

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;
  }
}

Look at СodePen, GitHub.

Share

Copy

yoomoney T-Bank

BTC (Network BTC) - 1C2EWWeEXVhg93hJA9KovpkSd3Rn3BkcYm

Ethereum (Network ERC20) - 0x05037ecbd8bcd15631d780c95c3799861182e6b8

Post categories

Related posts

CRYSTAL is available for testing

Animated modal in React using – onAni...

Animated dropdown menu in React using...

Animated icons of social networks, ch...

Animated Instagram and Facebook Icons

Popular posts

Animated modal in React using – onAni...

Animated dropdown menu in React using...

Animated pure js callback popup using...

How to hide the "read more" button, o...

CRYSTAL is available for testing

All categories

Created by 

Andrew Shedov

This website uses cookies. By clicking the 'Accept' button or continuing to use the website, you agree to the use of cookies.