模态打开时块滚动 [英] Block scroll on Modal open

问题描述

我正在为此网站进行工作，(使用

I'm working on this website, (Built using Fullpage.js plugin). In the first section I have a modal window (by clicking on the orange + symbol).

如您所见，如果在模态"打开时用鼠标滚动，则可以滚动到下一页.

As you can see, if you scroll with the mouse when the Modal is open, you can scroll to the next page.

我该如何阻止? 仅当您关闭模态时，我才需要使其滚动.

PS:如果可以，我正在使用 Wordpress ...

PS: I am using Wordpress if this could help...

我尝试过

JS

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

推荐答案

打开模式框后，您需要使用$.fn.fullpage.setAllowScrolling(false)禁用滚动，同时也要禁用键盘的$.fn.fullpage.setAllowScrolling(false)滚动.在模式关闭时，只需启用它们.这是一个工作示例，单击Modal Open和Modal Close.

When the modal box is open you need to disable the scrolling with $.fn.fullpage.setAllowScrolling(false) and also the keyboard scrolling $.fn.fullpage.setAllowScrolling(false). On modal close just enable them. Here is a working example, click on Modal Open and 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>

这篇关于模态打开时块滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！