From 6bf396254110488f1eb7d0edd37e94912677e199 Mon Sep 17 00:00:00 2001
From: Kirill Pet <job.mori.1967@gmail.com>
Date: Thu, 19 Dec 2024 19:25:25 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20js=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/gp-style-desktop.css | 24 +++++++++++++++++++++-
 assets/css/gp-style-tablet.css  | 12 +++++++++++
 assets/js/main.js               | 35 +++++++++++++++++++++++++++++++++
 index.html                      |  6 +++++-
 4 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index bff2e9a..0e96cf3 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -26,6 +26,11 @@
 .text-3{
     font-size: 16px;
 }
+@media only screen and (min-width: 992px) and (max-width: 1500px) {
+.wrapper{
+    max-width: 100%;
+}
+}
 /* text */
 
 /* header */
@@ -954,7 +959,9 @@
 
 /* modal */
 .modal__item{
-    width: 1000px;;
+    width: 1000px;
+
+    position: relative;
 }
 .modal__item > .title-1{
     text-align: center;
@@ -965,5 +972,20 @@
 .modal__item > .form{
     padding: 56px 36px 0 36px;
 }
+.modal-item__close{
+    position: absolute;
+    top: 40px;
+    right: 40px;
+
+    width: 24px;
+    aspect-ratio: 1;
+
+    background-image: url(/assets/img/icon/close.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+
+    background-color: rgba(42, 42, 45, 0);
+    border: none;
+}
 /* modal */
 @media only screen and (min-width: 992px) and (max-width: 1032px) {}
\ No newline at end of file
diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css
index 78db8a1..c7a4b9b 100644
--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@@ -751,5 +751,17 @@ main{
 }
 /* call */
 
+/* modal */
+.modal__item{
+    padding: 64px 16px;
+}
+.modal__item > .form{
+    padding: 40px 0 0 0;
+}
+.modal-item__close{
+    top: 20px;
+    right: 20px;
+}
+/* modal */
 
 @media only screen and (max-width: 992px) {}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index b219cdb..18d5b1e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -216,6 +216,41 @@ btnOpenSearchPhone.onclick = function () {
 
 // search end
 
+// open-modal
+
+let openModals = document.querySelectorAll('.open-modal'),
+    modal = document.querySelector('.modal');
+
+openModals.forEach(openModal => {
+    let modalName = openModal.dataset.modal;
+
+    openModal.onclick = function () {
+        let modalItem = document.querySelector(`.modal__item.${modalName}`);
+
+        modalItem.classList.add('active');
+        modal.classList.add('active');
+    }
+})
+
+modal.onclick = function (event) {
+    if (event.srcElement.classList.contains('modal')) {
+        document.querySelector(`.modal__item.active`).classList.remove('active');
+        modal.classList.remove('active');
+    }
+}
+
+let itemModels = document.querySelectorAll('.modal__item');
+
+itemModels.forEach(item => {
+    let btnClose = item.querySelector('.modal-item__close');
+
+    btnClose.onclick = function () {
+        item.classList.remove('active');
+        modal.classList.remove('active');
+    }
+})
+// open-modal end
+
 // resize
 window.addEventListener('resize', () => {
     let screenWidth = window.screen.width;
diff --git a/index.html b/index.html
index b2a14bb..dfe9a97 100644
--- a/index.html
+++ b/index.html
@@ -76,7 +76,7 @@
                         </a>
                     </div>
                     <div class="header-main__item">
-                        <button href="" class="btn-big btn-big--border btn-big--border--blood header-main__btn">
+                        <button href="" class="btn-big btn-big--border btn-big--border--blood header-main__btn open-modal" data-modal="modal-call">
                             Заказать звонок
                         </button>
                         <a href="" class="btn-big btn-big--blood header-main__btn">
@@ -1093,6 +1093,8 @@
 
         <div class="modal">
             <div class="modal__item modal-project">
+                <button class="modal-item__close"></button>
+
                 <p class="title-1">
                     Получи проект бесплатно
                 </p>
@@ -1147,6 +1149,8 @@
             </div>
 
             <div class="modal__item modal-call">
+                <button class="modal-item__close"></button>
+
                 <p class="title-1">
                     Обратный звонок
                 </p>