P粉8055354342023-08-18 22:20:41
The code you provided seems correct to disable scrolling when the modal is opened. However, there are several possible causes of the problem:
openModal
function you defined in the script. Instead, it directly manipulates the modal's style. This means that the isModalOpen
variable is not set to true
and the disableFullPageScroll
function is not called. To solve this problem you should use the openModal
function when the button is clicked: <button id="openModalButton" class="w3-button w3-black">打开模态框</button>
closeModal
function. It should look like this: <span id="closeModalButton" class="w3-button w3-display-topright">×</span>
closeModal
The function is not defined in the global scope, but it is called from HTML. This may cause errors. To solve this problem, you should define the closeModal
function in the global scope: window.closeModal = closeModal;
disableFullPageScroll
and enableFullPageScroll
functions use FullPage.js methods to disable and enable scrolling. If you are not using FullPage.js, or it is not initialized correctly, these methods will not work. You should check that FullPage.js is included and initialized correctly in your project.
The preventDefault
and stopPropagation
methods in a scroll event handler may not be sufficient to prevent scrolling in all cases. You may also want to set the
style to
hidden when the modal is open, and reset it to
auto when the modal is closed :
function disableFullPageScroll() { $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setKeyboardScrolling(false); document.body.style.overflow = 'hidden'; } function enableFullPageScroll() { $.fn.fullpage.setAllowScrolling(true); $.fn.fullpage.setKeyboardScrolling(true); document.body.style.overflow = 'auto'; }