如何在模态框打开时禁用滚动 - Full Page JS
<p>我想要做的是，当模态框打开时，禁用整个页面的JavaScript滚动。问题是，当我打开模态框并尝试滚动时，它确实移动了模态框后面的内容，即实际的网页，我想禁用它。当模态框打开时，背景应该被冻结。</p>
<pre class="brush:php;toolbar:false;"><div id="fullpage">
<div class="section">
<?php include './home-page/home-page-manufacturing-list.php';?>
<button id="turnOff" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">打开模态框</button>
</div>
</div>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="closeModal('modal01')" class="w3-button w3-display-topright">&times;</span>
<div class="container background-filter">
<div class="row">
<div class="col-12">
<h3 class="section-title"></h3>
</div>
<div class="col-12">
<h5>在我们的公司，我们对木工有着激情，这在我们所有的制造和室内设计项目中都能体现出来。我们擅长制作定制木制家具、装置和装饰品，它们不仅功能强大，而且美观</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var isModalOpen = false;
// 当模态框打开时禁用FullPage.js滚动
function disableFullPageScroll() {
$.fn.fullpage.setAllowScrolling(false);
$.fn.fullpage.setKeyboardScrolling(false);
}
// 当模态框关闭时启用FullPage.js滚动
function enableFullPageScroll() {
$.fn.fullpage.setAllowScrolling(true);
$.fn.fullpage.setKeyboardScrolling(true);
}
// 打开模态框
function openModal(modalId) {
document.getElementById(modalId).style.display = 'block';
isModalOpen = true;
disableFullPageScroll();
}
// 关闭模态框
function closeModal(modalId) {
document.getElementById(modalId).style.display = 'none';
isModalOpen = false;
enableFullPageScroll();
}
// 处理按钮点击事件以打开和关闭模态框
$('#openModalButton').on('click', function() {
openModal('id01'); // 将 'id01' 替换为您的模态框的ID
});
$('#closeModalButton').on('click', function() {
closeModal('id01'); // 将 'id01' 替换为您的模态框的ID
});
// 处理滚动事件
$(window).on('scroll', function(event) {
if (isModalOpen) {
event.preventDefault();
event.stopPropagation();
}
});
});
</script></pre>
1
931
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
您提供的代码在打开模态框时禁用滚动似乎是正确的。然而，有几个可能导致问题的原因：
openModal函数。相反，它直接操作模态框的样式。这意味着isModalOpen变量没有被设置为true，disableFullPageScroll函数也没有被调用。要解决这个问题，您应该在按钮被点击时使用openModal函数：closeModal函数。应该像这样：closeModal函数没有在全局作用域中定义，但它被从HTML中调用。这可能会导致错误。要解决这个问题，您应该在全局作用域中定义closeModal函数：disableFullPageScroll和enableFullPageScroll函数使用FullPage.js的方法来禁用和启用滚动。如果您没有使用FullPage.js，或者它没有正确初始化，这些方法将不起作用。您应该检查FullPage.js是否正确包含和初始化在您的项目中。滚动事件处理程序中的
的preventDefault和stopPropagation方法可能不足以阻止所有情况下的滚动。在模态框打开时，您可能还需要将overflow样式设置为hidden，并在模态框关闭时将其重置为auto：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'; }请尝试这些建议，并告诉我是否解决了您的问题。