Прокрутка блока по Modal open

Question

Я работаю над этим website, (Построен с использованием плагина Fullpage.js). В первом разделе у меня есть модальное окно (нажатие на оранжевый+ символ).

Как вы можете видеть, если вы прокручиваете мышь, когда модаль открыт, вы можете перейти на следующую страницу.

Как я могу заблокировать это? Мне нужно сделать это прокручиваемым ТОЛЬКО, когда вы закрываете Modal.

PS: Я использую Wordpress, если это может помочь ...

EDIT: я попытался это

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>