모달에서 스크롤을 블로킹

Question

나는 website (Fullpage.js 플러그인을 사용하여 빌드 됨) 작업 중입니다. 첫 번째 섹션에는 모달 창이 있습니다 (주황색+ 기호를 클릭 함).

모달이 열렸을 때 마우스로 스크롤하면 다음 페이지로 스크롤 할 수 있습니다.

어떻게 차단합니까? 모달을 닫을 때만 스크롤 가능하게해야합니다.

PS : 나는 워드 프레스이 도움이 될 수 있다면 ...

편집을 사용하고 있습니다 : 모달 상자가 열려있을 때 내가이

JS

<script type="text/javascript"> 
$(document).on('click', '.ts-awesome-plus', function() { 
$.fn.fullpage.setAllowScrolling(false); 
$.fn.fullpage.setKeyboardScrolling(false); 
}); 
</script> 

Answer 1

시도 $.fn.fullpage.setAllowScrolling(false)으로 스크롤을 비활성화하고 키보드 스크롤 $.fn.fullpage.setAllowScrolling(false)을 사용해야합니다. 모달을 닫을 때 활성화하십시오. 다음은 작동 예제입니다. Modal Open 및 Modal Close을 클릭하십시오.

$('#fullpage').fullpage({ 
 
    anchors: ['page1', 'page2', 'page3', 'page4'], 
 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
 
}); 
 

 
//adding the actions to the buttons 
 
$(document).on('click', '#turnOff', function() { 
 
    $.fn.fullpage.setAllowScrolling(false); 
 
    $.fn.fullpage.setKeyboardScrolling(false); 
 
}); 
 

 
$(document).on('click', '#turnOn', function() { 
 
    $.fn.fullpage.setAllowScrolling(true); 
 
    $.fn.fullpage.setKeyboardScrolling(true); 
 
});

.section { 
 
    text-align: center; 
 
    font-size: 3em; 
 
} 
 
/** 
 
Fixed button outside the fullpage.js wrapper 
 
*/ 
 

 
#turnOff, 
 
#turnOn { 
 
    position: fixed; 
 
    z-index: 999; 
 
    font-size: 2em; 
 
    cursor: pointer; 
 
    top: 20px; 
 
} 
 
#turnOff { 
 
    left: 20px; 
 
} 
 
#turnOn { 
 
    left: 240px; 
 
}

<link href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script> 
 

 
<button id="turnOff">Modal Open</button> 
 
<button id="turnOn">Modal Close</button> 
 

 

 
<div id="fullpage"> 
 
    <div class="section">One</div> 
 
    <div class="section">Two</div> 
 
    <div class="section">Three</div> 
 
    <div class="section">Four</div> 
 
</div>