亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

如何在模態(tài)框開(kāi)啟時(shí)停用捲動(dòng) - Full Page JS
P粉090087228
P粉090087228 2023-08-18 00:15:20
0
1
733
<p>我想要做的是,當(dāng)模態(tài)框打開(kāi)時(shí),禁用整個(gè)頁(yè)面的JavaScript滾動(dòng)。問(wèn)題是,當(dāng)我打開(kāi)模態(tài)框並嘗試滾動(dòng)時(shí),它確實(shí)移動(dòng)了模態(tài)框後面的內(nèi)容,即實(shí)際的網(wǎng)頁(yè),我想停用它。當(dāng)模態(tài)框打開(kāi)時(shí),背景應(yīng)該被凍結(jié)。 </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">開(kāi)啟模態(tài)框</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>在我們的公司,我們對(duì)木工有著熱情,這在我們所有的製造和室內(nèi)設(shè)計(jì)項(xiàng)目中都能體現(xiàn)出來(lái)。我們擅長(zhǎng)製作客製化木製家具、裝置和裝飾品,它們不僅功能強(qiáng)大,而且美觀</h5> </div> </div> </div> </div> </div> </div> <script> $(document).ready(function() { var isModalOpen = false; // 當(dāng)模態(tài)框開(kāi)啟時(shí)停用FullPage.js捲動(dòng) function disableFullPageScroll() { $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setKeyboardScrolling(false); } // 當(dāng)模態(tài)框關(guān)閉時(shí)啟用FullPage.js捲動(dòng) function enableFullPageScroll() { $.fn.fullpage.setAllowScrolling(true); $.fn.fullpage.setKeyboardScrolling(true); } // 開(kāi)啟模態(tài)框 function openModal(modalId) { document.getElementById(modalId).style.display = 'block'; isModalOpen = true; disableFullPageScroll(); } // 關(guān)閉模態(tài)框 function closeModal(modalId) { document.getElementById(modalId).style.display = 'none'; isModalOpen = false; enableFullPageScroll(); } // 處理按鈕點(diǎn)選事件以開(kāi)啟和關(guān)閉模態(tài)框 $('#openModalButton').on('click', function() { openModal('id01'); // 將 'id01' 替換為您的模態(tài)框的ID }); $('#closeModalButton').on('click', function() { closeModal('id01'); // 將 'id01' 替換為您的模態(tài)框的ID }); // 處理滾動(dòng)事件 $(window).on('scroll', function(event) { if (isModalOpen) { event.preventDefault(); event.stopPropagation(); } }); }); </script></pre>
P粉090087228
P粉090087228

全部回覆(1)
P粉805535434

您提供的程式碼在打開(kāi)模態(tài)框時(shí)禁用滾動(dòng)似乎是正確的。然而,有幾個(gè)可能導(dǎo)致問(wèn)題的原因:

  1. 開(kāi)啟模態(tài)方塊的按鈕沒(méi)有使用您在腳本中定義的openModal函數(shù)。相反,它直接操作模態(tài)框的樣式。這意味著isModalOpen變數(shù)沒(méi)有被設(shè)定為true,disableFullPageScroll函數(shù)也沒(méi)有被呼叫。要解決這個(gè)問(wèn)題,您應(yīng)該在按鈕被點(diǎn)擊時(shí)使用openModal函數(shù):
<button id="openModalButton" class="w3-button w3-black">打開(kāi)模態(tài)框</button>
  1. 關(guān)閉模態(tài)框的標(biāo)籤也沒(méi)有使用closeModal函數(shù)。應(yīng)該是這樣:
<span id="closeModalButton" class="w3-button w3-display-topright">&times;</span>
  1. closeModal函數(shù)沒(méi)有在全域作用域中定義,但它被從HTML中呼叫。這可能會(huì)導(dǎo)致錯(cuò)誤。要解決這個(gè)問(wèn)題,您應(yīng)該在全域作用域中定義closeModal函數(shù):
window.closeModal = closeModal;
  1. disableFullPageScrollenableFullPageScroll函式使用FullPage.js的方法來(lái)停用和啟用捲動(dòng)。如果您沒(méi)有使用FullPage.js,或者它沒(méi)有正確初始化,這些方法將無(wú)法運(yùn)作。您應(yīng)該檢查FullPage.js是否正確包含和初始化在您的專案中。

  2. 滾動(dòng)事件處理程序中的preventDefaultstopPropagation方法可能不足以阻止所有情況下的捲動(dòng)。在模態(tài)框打開(kāi)時(shí),您可能還需要將

    overflow樣式設(shè)定為hidden,並在模態(tài)框關(guān)閉時(shí)將其重設(shè)為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';
}

請(qǐng)嘗試這些建議,並告訴我是否解決了您的問(wèn)題。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板