Merge pull request #28 from gudzsv/modal-window-js-

Modal window js

src/partials/modal/modal.css

@@ -10,6 +10,8 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .backdrop.is-open {
   opacity: 1;

src/partials/modal/modal.html

@@ -1,6 +1,6 @@
 <div class="backdrop">
   <div class="modal-window">
-    <button modal="window-btn">
+    <button modal="button" class="window-btn">
       <svg class="window-dtn-icon" width="22" height="22">
         <use href="./assets/svg/icons.svg#icon-x"></use>
       </svg>

src/partials/modal/modal.js

@@ -0,0 +1,22 @@
+const btnClose = document.querySelector('.window-btn');
+const windowBackdrop = document.querySelector('.backdrop');
+
+btnClose.addEventListener('click', () => {
+  closeWindow();
+});
+
+windowBackdrop.addEventListener('click', event => {
+  if (event.target === windowBackdrop) {
+    closeWindow();
+  }
+});
+
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape') {
+    closeWindow();
+  }
+});
+
+function closeWindow() {
+  windowBackdrop.classList.remove('is-open');
+}