Merge pull request #233 from asenka0301/fix-modal-widget-behavior

[#210] fix(widget): fix site and modal overflow behavior

src/widget/index.js

@@ -9,14 +9,14 @@ const generateModalStyles = () => {
     display: none;
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    overflow: auto;
     outline: 0;
     background-color: rgba(0, 0, 0, 0.5);
   }
 
   #hexlet-correction-modal_modal-content {
     background-color: #fefefe;
-    margin: 15% auto;
+    margin: 10rem auto;
     padding: 20px;
     border: 1px solid #888;
     width: 80%;
@@ -113,6 +113,14 @@ const generateModalStyles = () => {
   return modalStyleEl;
 };
 
+const handleBodyScroll = (modalIsOpen) => {
+  if (modalIsOpen) {
+    document.body.style.overflow = 'hidden';
+  } else {
+    document.body.style.overflow = 'auto';
+  }
+};
+
 const generateModal = (state) => {
   generateModalStyles();
 
@@ -243,6 +251,7 @@ const view = (elements, state) => {
     switch (path) {
       case 'modalShown':
         renderModal(elements, state);
+        handleBodyScroll(state.modalShown);
         break;
       default:
         break;