Merge pull request #61 from GeorgiySergeev/test

fixed scroll when modal window is open
GeorgiySergeev · May 24, 2023 · 3547770 · 3547770
2 parents 4e3ceb5 + 8b25c3f
commit 3547770
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/js/modal.js b/src/js/modal.js
@@ -15,6 +15,7 @@ var modalButtons = document.querySelectorAll('.js-open-modal'),
 
          modalElem.classList.add('active');
          overlay.classList.add('active');
+         document.body.style.overflow = 'hidden';
       }); 
 
    });
@@ -27,6 +28,7 @@ var modalButtons = document.querySelectorAll('.js-open-modal'),
 
          parentModal.classList.remove('active');
          overlay.classList.remove('active');
+         document.body.style.overflow = 'auto';
       });
 
    }); // end foreach
@@ -39,13 +41,15 @@ var modalButtons = document.querySelectorAll('.js-open-modal'),
 
             document.querySelector('.modal.active').classList.remove('active');
             document.querySelector('.overlay').classList.remove('active');
+            document.body.style.overflow = 'auto';
         };
     }, false);
 
 
     overlay.addEventListener('click', function() {
         document.querySelector('.modal.active').classList.remove('active');
         this.classList.remove('active');
+        document.body.style.overflow = 'auto';
     });
 
 // (() => {

diff --git a/src/js/thanks-modal.js b/src/js/thanks-modal.js
@@ -7,10 +7,12 @@ const closeBtns = document.querySelectorAll('.close-btn');
 const openSuccessModal = () => {
   backdrop.classList.add(MODAL_ACTIVE_CLASS_NAME);
   thankModal.classList.add(MODAL_ACTIVE_CLASS_NAME);
+  document.body.style.overflow = 'hidden';
 };
 const closeSuccessModal = () => {
   thankModal.classList.remove(MODAL_ACTIVE_CLASS_NAME);
   backdrop.classList.remove(MODAL_ACTIVE_CLASS_NAME);
+  document.body.style.overflow = 'auto';
 };
 closeBtns.forEach(btn => {
   btn.addEventListener('click', e => {

diff --git a/src/partials/order-mod.html b/src/partials/order-mod.html
@@ -246,7 +246,9 @@ <h3 class="order-item-name">Fruits Basket</h3>
         placeholder="Enter full name..."
       />
 
-      <label class="contact-label visually-hidden" for="user-email">Email</label>
+      <label class="contact-label visually-hidden" for="user-email"
+        >Email</label
+      >
       <input
         class="input-modal-field"
         type="email"
@@ -256,13 +258,14 @@ <h3 class="order-item-name">Fruits Basket</h3>
         placeholder="Enter email..."
       />
 
-      <label class="contact-label visually-hidden" for="card-nomber">Card nomber</label>
+      <label class="contact-label visually-hidden" for="card-nomber"
+        >Card number</label
+      >
       <input
         class="input-modal-field"
-        type="number"
-        step="1"
-        min="5"
-        max="9999999999999999"
+        type="text"
+        pattern="^[0-9]{5,45}$"
+        title="Your card number must be between 5 to 45 digitals."
         required
         name="card-nomber"
         id="card-nomber"