モーダルオープンのブロックスクロール

Question

私はこのwebsite（Fullpage.jsプラグインを使用して構築されています）に取り組んでいます。最初のセクションでは、私はモーダルウィンドウを持っています（オレンジ+シンボルをクリックしています）。

モダルが開いているときにマウスをスクロールすると、次のページにスクロールすることができます。

これをブロックするにはどうすればよいですか？ モーダルを閉じるときにのみスクロール可能にする必要があります。

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>