js modal

assets/css/gp-style-core.css

@@ -797,29 +797,41 @@ button{
   background: rgba(0, 0, 0, 0.25);
 
   z-index: 200;
+
+  opacity: 0;
+  transition: opacity .2s ease-out;
+  pointer-events: none;
+}
+.modal.active{
+  opacity: 1;
+  pointer-events: auto;
 }
 .modal__aside{
   position: fixed;
   top: 0;
   right: 0;
 
-  width: auto;
+  width: 0;
   height: 100%;
 
   overflow: hidden;
+  transition: width .4s ease-out;
 }
 .modal__item{
   height: 100%;
 
   padding: 24px;
 
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
   background: var(--background-white);
 
   position: relative;
+
+  display: none;
+}
+.modal__item.active{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .modal__close{
   position: absolute;

assets/js/gp-main.js

@@ -19,38 +19,7 @@
 // }
 
 
-function toggleOpenX(mainElement, buttonElement ,widthElement, contentElement, close) {
-    let elements = document.querySelectorAll(mainElement);
 
-    elements.forEach(e => {
-        let thisMainElement = e,
-            thisButtonElement = e.querySelector(buttonElement),
-            thisWidthElement = e.querySelector(widthElement),
-            thisContentElement = e.querySelector(contentElement);
-
-        thisButtonElement.onclick = function (e) {
-            let width = thisWidthElement.clientHeight;
-
-            if (close == true && !thisMainElement.classList.contains('active')) {
-                elements.forEach(e => {
-                    if (e.classList.contains('active')) {
-                        e.classList.remove('active');
-                        e.querySelector(contentElement).style.height = null
-                    }                    
-                })
-            }
-
-            if (!thisMainElement.classList.contains('active')) {
-                thisContentElement.style.height = `${width}px`;
-                thisMainElement.classList.add('active');
-            }else{
-                thisContentElement.style.height = null;
-                thisMainElement.classList.remove('active');
-            }
-        }
-        
-    });
-}
 
 // header start
 // toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
@@ -81,3 +50,85 @@ checkbox.forEach(e => {
     }
 })
 // checkbox 
+
+// media
+modalOpen('.button--filter', '.modal__filter');
+modalClose('.modal__close');
+// media
+
+
+
+function modalOpen(buttonElement, contentElement){
+    let modal = document.querySelector('.modal'),
+        aside = document.querySelector('.modal__aside'),
+        elements = document.querySelectorAll(buttonElement);
+
+    elements.forEach(e => {
+        let thisContentElement = document.querySelector(contentElement);
+
+        e.onclick = function () {
+            modal.classList.add('active');
+            thisContentElement.classList.add('active');
+            
+            let width = thisContentElement.clientWidth;
+
+            setTimeout(() => {
+                aside.style.width = `${width}px`;
+            }, 10);
+        }
+    })
+}
+
+function modalClose(buttonElement) {
+    let modal = document.querySelector('.modal'),
+        aside = document.querySelector('.modal__aside'),
+        asideItems = document.querySelectorAll('.modal__item'),
+        elements = document.querySelectorAll(buttonElement);
+
+    elements.forEach(e => {
+        e.onclick = function () {            
+            modal.classList.remove('active');
+            aside.style.width = 0;
+            
+            
+            asideItems.forEach(e => {
+                if (e.classList.contains('active')) {
+                    e.classList.remove('active');
+                }
+            })
+        }
+    })
+}
+
+function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
+    let elements = document.querySelectorAll(mainElement);
+
+    elements.forEach(e => {
+        let thisMainElement = e,
+            thisButtonElement = e.querySelector(buttonElement),
+            thisHeightElement = e.querySelector(heightElement),
+            thisContentElement = e.querySelector(contentElement);
+
+        thisButtonElement.onclick = function (e) {
+            let height = thisHeightElement.clientHeight;
+
+            if (close == true && !thisMainElement.classList.contains('active')) {
+                elements.forEach(e => {
+                    if (e.classList.contains('active')) {
+                        e.classList.remove('active');
+                        e.querySelector(contentElement).style.height = null
+                    }                    
+                })
+            }
+
+            if (!thisMainElement.classList.contains('active')) {
+                thisContentElement.style.height = `${height}px`;
+                thisMainElement.classList.add('active');
+            }else{
+                thisContentElement.style.height = null;
+                thisMainElement.classList.remove('active');
+            }
+        }
+        
+    });
+}