update closing of the modal window

SerhiiRepinskyi · Feb 20, 2023 · 83ba1d7 · 83ba1d7
1 parent d32463c
commit 83ba1d7
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 63 deletions.
diff --git a/css/main.css b/css/main.css
@@ -56,8 +56,8 @@ body {
   letter-spacing: 0.03em;
 }
 
-/* - коли на bodi клас modal-open від js (при відкритому модальному вікні) */
-body.modal-open {
+/* - коли на bodi клас show-modal від js (при відкритому модальному вікні) */
+body.show-modal {
   overflow: hidden;
 }
 
@@ -181,35 +181,44 @@ body.modal-open {
 }
 
 /* -----backdrop + modal----- */
+body.show-modal .backdrop {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: initial;
+}
+
 .backdrop {
   position: fixed;
+  justify-content: center;
+  align-items: center;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background-color: rgba(0, 0, 0, 0.2);
   z-index: 10;
   overflow-y: scroll;
   transition: opacity var(--tra), visibility var(--tra);
-}
-
-.backdrop.is-hidden {
   opacity: 0; /* - невидимий елемент */
   visibility: hidden; /* - припинить роботу фокусів на модалці */
   pointer-events: none; /* - на елемент не діють ніякі події */
-  padding: 93px 15px 94px; /* - відступи в бекдропі для моб. версії */
+}
+
+body.show-modal .modal {
+  transform: translate(-50%, -50%) scale(1) rotate(0);
+  border-radius: 4px;
 }
 
 .modal {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%) scale(1) rotate(0);
+  transform: translate(-50%, -50%) scale(0.7) rotate(360deg);
   transition: transform var(--tra), border-radius var(--tra), box-shadow var(--tra);
   padding: 40px;
   width: 528px;
+  border-radius: 50%;
   background-color: var(--primary-white-color);
-  border-radius: 4px;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.2);
 }
 @media screen and (max-width: 1199px) {
@@ -219,11 +228,6 @@ body.modal-open {
   }
 }
 
-.backdrop.is-hidden .modal {
-  transform: translate(-50%, -50%) scale(1.5) rotate(-360deg);
-  border-radius: 50%;
-}
-
 .modal-close {
   position: absolute;
   top: 8px;
@@ -293,9 +297,6 @@ body.modal-open {
 .form-input:not(:focus):not(:-moz-placeholder-shown):invalid {
   border: 1px solid rgba(235, 16, 16, 0.781);
 }
-.form-input:not(:focus):not(:-ms-input-placeholder):invalid {
-  border: 1px solid rgba(235, 16, 16, 0.781);
-}
 .form-input:not(:focus):not(:placeholder-shown):invalid {
   border: 1px solid rgba(235, 16, 16, 0.781);
 }
@@ -332,12 +333,6 @@ body.modal-open {
   letter-spacing: 0.01em;
   color: rgba(117, 117, 117, 0.5);
 }
-.form-comment:-ms-input-placeholder {
-  font-size: 12px;
-  line-height: 1.1666666667;
-  letter-spacing: 0.01em;
-  color: rgba(117, 117, 117, 0.5);
-}
 .form-comment::placeholder {
   font-size: 12px;
   line-height: 1.1666666667;
@@ -1135,9 +1130,6 @@ body.modal-open {
 .footer-form__input:not(:focus):not(:-moz-placeholder-shown):invalid {
   border: 1px solid rgba(235, 16, 16, 0.781);
 }
-.footer-form__input:not(:focus):not(:-ms-input-placeholder):invalid {
-  border: 1px solid rgba(235, 16, 16, 0.781);
-}
 .footer-form__input:not(:focus):not(:placeholder-shown):invalid {
   border: 1px solid rgba(235, 16, 16, 0.781);
 }
@@ -1165,10 +1157,6 @@ body.modal-open {
   transform: translateY(-44px);
   color: var(--accent-color);
 }
-.footer-form__input:not(:-ms-input-placeholder) + .footer-form__label {
-  transform: translateY(-44px);
-  color: var(--accent-color);
-}
 .footer-form__input:focus + .footer-form__label, .footer-form__input:not(:placeholder-shown) + .footer-form__label {
   transform: translateY(-44px);
   color: var(--accent-color);

diff --git a/css/main.css.map b/css/main.css.map
diff --git a/css/main.min.css b/css/main.min.css
diff --git a/css/main.min.css.map b/css/main.min.css.map
diff --git a/index.html b/index.html
@@ -700,7 +700,7 @@ <h2 class="title-section title-section--clients">Постійні клієнти
     </footer>
 
     <!--Модальне вікно з формою-->
-    <div class="backdrop is-hidden" data-modal>
+    <div class="backdrop" data-modal>
       <div class="modal">
         <button class="modal-close" type="button" data-modal-close>
           <svg class="modal-close-icon" width="18" height="18">

diff --git a/js/modal.js b/js/modal.js
@@ -1,15 +1,52 @@
-(() => {
-  const refs = {
-    openModalBtn: document.querySelector('[data-modal-open]'),
-    closeModalBtn: document.querySelector('[data-modal-close]'),
-    modal: document.querySelector('[data-modal]'),
-  };
-
-  refs.openModalBtn.addEventListener('click', toggleModal);
-  refs.closeModalBtn.addEventListener('click', toggleModal);
-
-  function toggleModal() {
-    document.body.classList.toggle("modal-open");
-    refs.modal.classList.toggle('is-hidden');
+const refs = {
+  openModalBtn: document.querySelector('[data-modal-open]'),
+  closeModalBtn: document.querySelector('[data-modal-close]'),
+  backdrop: document.querySelector('[data-modal]'),
+};
+
+refs.openModalBtn.addEventListener('click', onOpenModal);
+refs.closeModalBtn.addEventListener('click', onCloseModal);
+refs.backdrop.addEventListener('click', onBackdropClick);
+
+function onOpenModal() {
+  window.addEventListener('keydown', onEscKeyPress);
+  document.body.classList.add('show-modal');
+}
+
+function onCloseModal() {
+  window.removeEventListener('keydown', onEscKeyPress);
+  document.body.classList.remove('show-modal');
+}
+
+function onBackdropClick(event) {
+  // console.log(event.currentTarget);
+  // console.log(event.target);
+
+  if (event.currentTarget === event.target) {
+    onCloseModal();
   }
-})();
+}
+
+function onEscKeyPress(event) {
+  const ESC_KEY_CODE = 'Escape';
+  // console.log(event.code);
+
+  if (event.code === ESC_KEY_CODE) {
+    onCloseModal();
+  }
+}
+
+// ========== Old version ==========
+//   const refs = {
+//     openModalBtn: document.querySelector('[data-modal-open]'),
+//     closeModalBtn: document.querySelector('[data-modal-close]'),
+//     modal: document.querySelector('[data-modal]'),
+//   };
+
+//   refs.openModalBtn.addEventListener('click', toggleModal);
+//   refs.closeModalBtn.addEventListener('click', toggleModal);
+
+//   function toggleModal() {
+//     document.body.classList.toggle('modal-open');
+//     refs.modal.classList.toggle('is-hidden');
+//   }
diff --git a/sass/base/_common.scss b/sass/base/_common.scss
@@ -5,7 +5,7 @@ body {
   letter-spacing: 0.03em;
 }
 
-/* - коли на bodi клас modal-open від js (при відкритому модальному вікні) */
-body.modal-open {
+/* - коли на bodi клас show-modal від js (при відкритому модальному вікні) */
+body.show-modal {
   overflow: hidden;
 }
diff --git a/sass/components/_modal.scss b/sass/components/_modal.scss
@@ -1,38 +1,50 @@
 /* -----backdrop + modal----- */
+body.show-modal .backdrop {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: initial;
+}
+
 .backdrop {
   position: fixed;
+  // justify-content: center;
+  // align-items: center;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background-color: rgba(0, 0, 0, 0.2);
 
   z-index: 10;
   overflow-y: scroll;
 
   transition: opacity var(--tra), visibility var(--tra);
-}
 
-.backdrop.is-hidden {
   opacity: 0; /* - невидимий елемент */
   visibility: hidden; /* - припинить роботу фокусів на модалці */
   pointer-events: none; /* - на елемент не діють ніякі події */
+}
 
-  padding: 93px 15px 94px; /* - відступи в бекдропі для моб. версії */
+body.show-modal .modal {
+  transform: translate(-50%, -50%) scale(1) rotate(0);
+  border-radius: 4px;
 }
 
 .modal {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%) scale(1) rotate(0);
+
+  transform: translate(-50%, -50%) scale(0.7) rotate(360deg);
   transition: transform var(--tra), border-radius var(--tra), box-shadow var(--tra);
+
   padding: 40px;
 
   width: 528px;
 
+  border-radius: 50%;
+  // border-radius: 4px;
   background-color: var(--primary-white-color);
-  border-radius: 4px;
 
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14),
     0px 2px 1px rgba(0, 0, 0, 0.2);
@@ -43,11 +55,6 @@
   }
 }
 
-.backdrop.is-hidden .modal {
-  transform: translate(-50%, -50%) scale(1.5) rotate(-360deg);
-  border-radius: 50%;
-}
-
 .modal-close {
   position: absolute;
   top: 8px;