如何在模態框開啟時停用捲動 - Full Page JS
P粉090087228
2023-08-18 00:15:20
<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">×</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>
您提供的程式碼在打開模態框時禁用滾動似乎是正確的。然而，有幾個可能導致問題的原因：
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'; }請嘗試這些建議，並告訴我是否解決了您的問題。