{"id":273,"date":"2023-05-19T02:43:35","date_gmt":"2023-05-18T23:43:35","guid":{"rendered":"https:\/\/shedov.top\/ru\/?p=273"},"modified":"2026-01-12T00:52:05","modified_gmt":"2026-01-11T21:52:05","slug":"animirovannaya-vsplyvayushchaya-forma-obratnogo-zvonka-na-chistom-js-s-ispolzovaniem-svojstva-css-display","status":"publish","type":"post","link":"https:\/\/shedov.top\/ru\/animirovannaya-vsplyvayushchaya-forma-obratnogo-zvonka-na-chistom-js-s-ispolzovaniem-svojstva-css-display\/","title":{"rendered":"\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0437\u0432\u043e\u043d\u043a\u0430 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c js \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS – display"},"content":{"rendered":"\n\n
\n
\n \n \"\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \n <\/a>\n<\/div>\n<\/div>\n\n\n\n\n

\u041f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u0435\u043c\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e – display: block, \u0437\u0430\u0442\u0435\u043c, \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f – opacity: 1, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display:block. \u041f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u043e\u043a\u043d\u0430, \u0435\u043c\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e – opacity: 0, \u0437\u0430\u0442\u0435\u043c, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c – display:none.<\/p>\n\n\n\n \n\n\n \n\n\n

index.html<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <title>Animated pure js callback popup using css property - display<\/title>\n    <link rel=\"stylesheet\" href=\".\/style.css\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <link rel=stylesheet href=https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.9.0\/css\/all.min.css>\n  <\/head>\n  <body>\n    <div class=\"title\">\n      <h1>Animated pure js callback popup using css property - display<\/h1>\n    <\/div>\n    <div class=\"site_link\">\n      <a href=\"https:\/\/shedov.top\/\" target=\"blank\">SHEDOV.TOP<\/a>\n    <\/div>\n    <button class=\"callback_button\">\n      <div class=\"callback_button_pulsation\"><\/div>\n      <i class=\"fa fa-phone\"> <\/i>\n    <\/button>\n    <div class=\"callback_wrap\">\n      <div class=\"callback_window_wrap\">\n        <div class=\"callback_window\">\n          <button class=\"callback_window_button_close\">\n          <i class=\"fa fa-times callback_window-button_close_icon\" aria-hidden=\"true\"><\/i>\n          <\/button>\n          <div class=\"callback_window_title\">\n            <p>Request a call back<\/p>\n          <\/div>\n          <div class=\"callback_window_input_name\">\n            <input id=\"username\" type=\"text\" name=\"callback_window_input_name\" placeholder=\"Name\" \/>\n          <\/div>\n          <div class=\"callback_window_input_phone\">\n            <input type=\"text\" id=\"phone\" name=\"callback_window_input_phone\"\n              onkeyup=\"this.value = this.value.replace(\/[^+\\d]\/g, '');\" placeholder=\"Phone number\" \/>\n          <\/div>\n          <div class=\"callback_privacy_policy\">\n            <div class=\"checkbox_callback_privacy_policy\">\n              <input type=\"checkbox\" id=\"accept-terms\" \/>\n            <\/div>\n            <label class=\"callback_privacy_policy_label\" for=\"accept-terms\">\n              <p>I consent to the processing of my personal data.<\/p>\n            <\/label>\n          <\/div>\n          <div class=\"callback_send_button\">\n            <button>\n            Send\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <script src=\".\/script.js\"><\/script>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
script.js<\/h2>\n\n\n\n \n\n\n\n
document.addEventListener(\"DOMContentLoaded\", function () {\n  let callback_button = document.querySelector(\".callback_button\");\n  let callback_window = document.querySelector(\".callback_window\");\n  let callback_window_button_close = document.querySelector(\n    \".callback_window_button_close\"\n  );\n  let callback_wrap = document.querySelector(\".callback_wrap\");\n\n  callback_button.addEventListener(\"click\", (e) => {\n    e.stopPropagation();\n    animateDisplay(\n      document.querySelector(\".callback_wrap\"),\n      \"active\",\n      \"block\",\n      300\n    );\n    document.getElementsByClassName(\"callback_button\")[0].style =\n      \"visibility: hidden\";\n    document.getElementsByClassName(\"callback_button\")[0].style =\n      \"opacity: 0\";\n  });\n\n  callback_window_button_close.addEventListener(\"click\", (e) => {\n    e.stopPropagation();\n    animateDisplay(\n      document.querySelector(\".callback_wrap\"),\n      \"active\",\n      \"block\",\n      300\n    );\n    document.getElementsByClassName(\"callback_button\")[0].style =\n      \"visibility: visible\";\n    document.getElementsByClassName(\"callback_button\")[0].style =\n      \"opacity: 1\";\n  });\n\n  \/\/ Tracking a click outside of a modal window\n  document.addEventListener(\"click\", (e) => {\n    let target = e.target;\n    let target_callback_window =\n      target == callback_window || callback_window.contains(target);\n    let target_callback_button = target == callback_button;\n    let callback_wrap_active = callback_wrap.classList.contains(\"active\");\n    if (\n      !target_callback_window &&\n      !target_callback_button &&\n      callback_wrap_active\n    ) {\n      animateDisplay(\n        document.querySelector(\".callback_wrap\"),\n        \"active\",\n        \"block\",\n        300\n      );\n      document.getElementsByClassName(\"callback_button\")[0].style =\n        \"visibility: visible\";\n      document.getElementsByClassName(\"callback_button\")[0].style =\n        \"opacity: 1\";\n    }\n  });\n\n  \/\/ Animation function\n  function animateDisplay(target, animationClass, displayType, timeout) {\n    let doneTimedDisplay = false,\n      displaying = false;\n    target.addEventListener(\"transitionend\", function () {\n      if (!target.classList.contains(\"active\")) {\n        target.style.display = \"none\";\n      }\n      doneTimedDisplay = true;\n    });\n    if (!target.style.display || target.style.display === \"none\") {\n      displaying = true;\n      target.style.display = displayType;\n    } else {\n      displaying = false;\n    }\n    setTimeout(function () {\n      target.classList.toggle(animationClass);\n      doneTimedDisplay = false;\n    }, 10);\n    if (!displaying) {\n      setTimeout(function () {\n        if (!doneTimedDisplay) {\n          target.style.display = \"none\";\n        }\n        doneTimedDisplay = true;\n      }, timeout);\n    }\n  }\n});\n<\/code><\/pre>\n\n\n\n \n\n\n\n
style.css<\/h2>\n\n\n\n
* {\n  text-decoration: none;\n}\n\nul[class],\nol[class] {\n  padding: 0;\n}\n\n@-webkit-keyframes fade-in {\n  0% {\n    opacity: 0.1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@-moz-keyframes fade-in {\n  0% {\n    opacity: 0.1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@-o-keyframes fade-in {\n  0% {\n    opacity: 0.1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0.1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\nbody {\n  -webkit-animation: fade-in 700ms linear;\n  -moz-animation: fade-in 700ms linear;\n  -o-animation: fade-in 700ms linear;\n  animation: fade-in 700ms linear;\n}\n\nbody,\nh1,\nh2,\nh3,\nh4,\np,\nul[class],\nol[class],\nli,\nfigure,\nfigcaption,\nblockquote,\ndl,\ndd {\n  margin: 0;\n}\n\nul {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.callback_button {\n  position: fixed;\n  right: 30px;\n  bottom: 50px;\n  border-radius: 50%;\n  background-color: rgb(223 179 58 \/ 39%);\n  color: rgb(255, 255, 255);\n  width: 80px;\n  height: 80px;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  transform: rotate(100deg);\n  align-items: center;\n  opacity: 1;\n  transition: all 300ms ease;\n  visibility: visible;\n  border: none;\n}\n\n.callback_button i {\n  font-size: 40px;\n  animation-name: joomly-callback-tossing;\n  animation-duration: 1.5s;\n  animation-iteration-count: infinite;\n}\n\n@keyframes joomly-callback-tossing {\n  0% {\n    transform: rotate(-8deg);\n  }\n\n  50% {\n    transform: rotate(8deg);\n  }\n\n  100% {\n    transform: rotate(-8deg);\n  }\n}\n\n.callback_button_pulsation {\n  width: 95px;\n  height: 95px;\n  background: rgba(200, 158, 30, 0.504);\n  border-radius: 50%;\n  transform: scale(0.85);\n  animation: pulse 2s ease-in-out infinite;\n  position: absolute;\n}\n\n@keyframes pulse {\n  from {\n    transform: scale(0.85);\n  }\n\n  50% {\n    transform: scale(1.1);\n  }\n\n  to {\n    transform: scale(0.85);\n  }\n}\n\n.callback_wrap {\n  display: none;\n  opacity: 0;\n  transition: all 300ms ease;\n}\n\n.callback_wrap.active {\n  opacity: 1;\n  display: block;\n  transition: all 300ms ease;\n}\n\n.callback_window_wrap {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: rgb(0 0 0 \/ 14%);\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  opacity: 1;\n}\n\n.callback_window {\n  border-radius: 8px;\n  width: 100%;\n  max-width: 300px;\n  background: rgb(255, 255, 255);\n  margin-left: 20px;\n  margin-right: 20px;\n  position: relative;\n}\n\n.callback_window_button_close {\n  position: absolute;\n  top: -9px;\n  right: -8px;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #fff;\n  border: 2px solid #1f1e1e !important;\n  padding: 2px;\n  transition: all 300ms ease;\n}\n\n.callback_window_button_close i {\n  font-size: 21px;\n  color: #1f1e1e;\n  transition: all 300ms ease;\n}\n\n.callback_window-button_close_icon {\n  transition: all 500ms ease;\n}\n\n.callback_window_button_close:hover .callback_window-button_close_icon {\n  color: #1f1e1e;\n  transition: all 500ms ease;\n  transform: rotate(360deg);\n}\n\n.callback_privacy_policy {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding-top: 5px;\n  padding-bottom: 11px;\n}\n\n.checkbox_callback_privacy_policy {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding-left: 5px;\n  cursor: pointer;\n}\n\n.callback_privacy_policy_label {\n  text-align: left;\n  font-size: 12px;\n  color: #000000;\n  margin-left: 5px;\n  margin-right: 5px;\n  font-family: Arial, Helvetica, sans-serif;\n  cursor: pointer;\n}\n\n.callback_window_title {\n  background-color: #1f1e1e;\n  cursor: default;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n\n.callback_window_title p {\n  text-align: center;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 17px;\n  padding: 5px;\n  color: rgb(255, 255, 255);\n}\n\n.callback_window_input_name {\n  display: flex;\n  justify-content: center;\n  padding-top: 17px;\n}\n\n.callback_window_input_name::placeholder {\n  font-family: Arial, Helvetica, sans-serif;\n  color: rgb(79, 78, 78);\n}\n\ninput {\n  outline: none;\n}\n\n.callback_window_input_name input {\n  transition: all 500ms ease;\n  width: 100%;\n  max-width: 190px;\n  font-family: Arial, Helvetica, sans-serif;\n  height: 25px;\n  padding-left: 15px;\n  border: 2px solid #1f1e1e;\n  border-radius: 20px;\n  resize: none;\n  background-color: transparent;\n  color: #000000;\n  transition: all 500ms ease;\n  font-size: 15px;\n  font-weight: 400;\n  line-height: 18px;\n  text-decoration: none;\n}\n\n.callback_window_input_phone {\n  display: flex;\n  justify-content: center;\n}\n\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.callback_window_input_phone::placeholder {\n  font-family: Arial, Helvetica, sans-serif;\n  color: rgb(79, 78, 78);\n}\n\n.callback_window_input_phone input {\n  font-family: Arial, Helvetica, sans-serif;\n  transition: all 500ms ease;\n  margin-bottom: 6px;\n  width: 100%;\n  max-width: 190px;\n  margin-top: 10px;\n  height: 25px;\n  padding-left: 15px;\n  border: 2px solid #1f1e1e;\n  border-radius: 20px;\n  resize: none;\n  background-color: transparent;\n  color: #000000;\n  margin-bottom: 10px;\n  transition: all 500ms ease;\n  font-size: 15px;\n  font-weight: 400;\n  line-height: 18px;\n  text-decoration: none;\n}\n\n.callback_send_button {\n  display: flex;\n  justify-content: center;\n}\n\n.callback_send_button button {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 25px;\n  height: 30px;\n  background: #1f1e1e;\n  font-family: Arial, Helvetica, sans-serif;\n  margin-bottom: 15px;\n  color: #fff;\n  font-weight: bold;\n  border: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  -o-appearance: none;\n  appearance: none;\n  transition: all 500ms ease;\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.callback_send_button button:hover {\n  background: rgb(53, 53, 53);\n  transition: all 500ms ease;\n}\n\n.title {\n  margin-left: 20px;\n  margin-right: 20px;\n  margin-top: 30px;\n  margin-bottom: 10px;\n}\n\n.title h1 {\n  font-size: 35px;\n  text-align: center;\n  color: rgb(26, 26, 26);\n  font-family: \"Trebuchet MS\";\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n}\n\n.site_link {\n  text-align: center;\n  margin-left: 20px;\n  margin-right: 20px;\n}\n\n.site_link a {\n  font-size: 20px;\n  color: rgb(0, 0, 0);\n  text-decoration: none;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n  margin-top: 0px;\n  margin-bottom: 0px;\n  transition: all 300ms ease;\n}\n\n@media (min-width: 1000px) {\n  .site_link a:hover {\n    color: rgb(80, 79, 79);\n    transition: all 300ms ease;\n  }\n}\n\n <\/code><\/pre>\n\n\n\n
\n
\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0421odePen<\/a>, GitHub<\/a>.<\/p> \n<\/div>\n","protected":false},"excerpt":{"rendered":"\u041f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u0435\u043c\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e – display: block, \u0437\u0430\u0442\u0435\u043c, \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f – opacity: 1, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display:block. \u041f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u043e\u043a\u043d\u0430, \u0435\u043c\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e – opacity: 0, \u0437\u0430\u0442\u0435\u043c, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c – display:none.     index.html script.js     style.css \u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0421odePen, GitHub.","protected":false},"author":1,"featured_media":523,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,4,15,10,12],"tags":[],"class_list":["post-273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-js","category-modal","category-animation","category-animation-js"],"_links":{"self":[{"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/posts\/273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/comments?post=273"}],"version-history":[{"count":37,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/posts\/273\/revisions"}],"predecessor-version":[{"id":4375,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/posts\/273\/revisions\/4375"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/media\/523"}],"wp:attachment":[{"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/media?parent=273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/categories?post=273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shedov.top\/ru\/wp-json\/wp\/v2\/tags?post=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}