오버레이 모달보기에서 본문 스크롤링 사용 안 함

Question

모달보기를 표시하고 숨기려면 this script을 사용하고 있지만 모달보기가 열리면 본문에 대한 스크롤을 사용하지 않도록 설정하고 닫으면 해제 할 수 있습니다.

JS 코드를 수정하려고했지만 작동하지만 오프닝 애니메이션이 손상됩니다. 여기 수정 된 코드는 다음과 같습니다

(function() { 
var triggerBttn = document.getElementById('trigger-overlay'), 
    overlay = document.querySelector('div.overlay'), 
    bodyTag = document.querySelector('body'), 
    closeBttn = overlay.querySelector('button.overlay-close'); 
    transEndEventNames = { 
     'WebkitTransition': 'webkitTransitionEnd', 
     'MozTransition': 'transitionend', 
     'OTransition': 'oTransitionEnd', 
     'msTransition': 'MSTransitionEnd', 
     'transition': 'transitionend' 
    }, 
    transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ], 
    support = { transitions : Modernizr.csstransitions }; 

function toggleOverlay() { 

    if(classie.has(overlay, 'open')) { 
     classie.remove(overlay, 'open'); 
     classie.add(overlay, 'close'); 

     var onEndTransitionFn = function(ev) { 
      if(support.transitions) { 
       if(ev.propertyName !== 'visibility') return; 
       this.removeEventListener(transEndEventName, onEndTransitionFn); 
      } 

      classie.remove(overlay, 'close'); 
      classie.remove(bodyTag, 'noscroll'); 
     }; 
     if(support.transitions) { 
      overlay.addEventListener(transEndEventName, onEndTransitionFn); 
     } 
     else { 
      onEndTransitionFn(); 
     } 
    } 
    else if(!classie.has(overlay, 'close')) { 
     classie.add(overlay, 'open'); 
     classie.add(bodyTag, 'noscroll'); 
    } 
} 

triggerBttn.addEventListener('click', toggleOverlay); 
closeBttn.addEventListener('click', toggleOverlay);})(); 

원래 데모 : 이미 여기에 설명 jsfiddle

Answer 1

: 그것은 부트 스트랩을 사용되지만, Prevent BODY from scrolling when a modal is opened

같은 솔루션은 여전히 ​​작동 할 수 있습니다. 두 번째 대답은 받아 들인 것보다 조금 낫다. 이것은 모달이 열려있을 때 몸체를 만드는 몸체를 전환하는 것을 제안합니다. overflow: hidden;.

Answer 2

먼저 jquery를 추가하십시오. https://jquery.com에서 다운로드하여 <script src="jquery.min.js"></script>으로 문서에 추가하십시오.

그런 다음, 문서의 하단 (애니메이션과 문서) 다음 싹둑를 추가로 :

<script> 
    $(document).ready(function() { 
     $('#trigger-overlay').click(function() { 
      $('html').css('overflow', 'hidden'); 
      $('body').bind('touchmove', function(e) { 
       e.preventDefault() 
      }); 
     }); 
     $('.overlay-close').click(function() { 
      $('html').css('overflow', 'scroll'); 
      $('body').unbind('touchmove'); 
     }); 
    }); 
</script> 

나는 https://github.com/codrops/FullscreenOverlayStyles 및 애니메이션 Huge inc에서 코드이 시도했다. 이렇게하면 애니메이션이 열려있을 때 텍스트 스크롤을 방지 할 수 있습니다.

내 대답 업데이트 됨, 첫 번째 대답은 터치 장치에서 스크롤을 허용했습니다.