问题
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.
How can I block this? I need to make it scrollable ONLY when you close the Modal.
PS: I am using Wordpress if this could help...
EDIT: i tried this
JS
<script type="text/javascript">
$(document).on('click', '.ts-awesome-plus', function() {
$.fn.fullpage.setAllowScrolling(false);
$.fn.fullpage.setKeyboardScrolling(false);
});
</script>
回答1:
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>
来源:https://stackoverflow.com/questions/38264469/block-scroll-on-modal-open