在模态打开时阻止滚动

时间:2016-07-08 10:30:38

标签: fullpage.js

我正在处理这个website,(使用Fullpage.js插件构建)。在第一部分中,我有一个模态窗口(通过单击橙色 + 符号)。

如您所见,如果您在模态打开时使用鼠标滚动,则可以滚动到下一页。

我怎么能阻止这个? 我需要在关闭模态时使其可滚动。

PS:我正在使用 Wordpress ,如果这可以帮助......

编辑:我试过这个

JS

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

1 个答案:

答案 0 :(得分:7)

当模态框打开时,您需要使用$.fn.fullpage.setAllowScrolling(false)和键盘滚动$.fn.fullpage.setAllowScrolling(false)禁用滚动。关于模态关闭只需启用它们。这是一个有效的示例,请点击Modal OpenModal Close

&#13;
&#13;
$('#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);
});
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;