Apa yang saya mahu lakukan ialah, apabila modal dibuka, lumpuhkan tatal JavaScript untuk keseluruhan halaman. Masalahnya ialah apabila saya membuka modal dan cuba menatal, ia mengalihkan kandungan di belakang modal, iaitu halaman web sebenar, dan saya mahu melumpuhkannya. Apabila modal dibuka, latar belakang harus dibekukan.
$(document).ready(function() { var isModalOpen = palsu; // Lumpuhkan penatalan FullPage.js apabila modal dibuka fungsi disableFullPageScroll() { $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setKeyboardScrolling(false); } // Dayakan tatal FullPage.js apabila modal ditutup fungsi enableFullPageScroll() { $.fn.fullpage.setAllowScrolling(true); $.fn.fullpage.setKeyboardScrolling(true); } //Buka kotak modal function openModal(modalId) { document.getElementById(modalId).style.display = 'block'; isModalOpen = benar; disableFullPageScroll(); } // Tutup kotak modal function closeModal(modalId) { document.getElementById(modalId).style.display = 'tiada'; isModalOpen = palsu; enableFullPageScroll(); } // Kendalikan peristiwa klik butang untuk membuka dan menutup modal $('#openModalButton').on('klik', function() { openModal('id01'); // Gantikan 'id01' dengan ID modal anda }); $('#closeModalButton').on('klik', function() { closeModal('id01'); // Gantikan 'id01' dengan ID modal anda }); // Mengendalikan acara skrol $(window).on('scroll', function(event) { if (isModalOpen) { event.preventDefault(); event.stopPropagation(); } }); });
Kod yang anda berikan nampaknya betul untuk melumpuhkan penatalan apabila modal dibuka. Walau bagaimanapun, terdapat beberapa kemungkinan punca masalah:
openModal
函数。相反,它直接操作模态框的样式。这意味着isModalOpen
变量没有被设置为true
,disableFullPageScroll
函数也没有被调用。要解决这个问题,您应该在按钮被点击时使用openModal
yang anda takrifkan dalam skrip:closeModal
. Ia sepatutnya kelihatan seperti ini:×
closeModal
函数没有在全局作用域中定义,但它被从HTML中调用。这可能会导致错误。要解决这个问题,您应该在全局作用域中定义closeModal
Fungsi ini tidak ditakrifkan dalam skop global, tetapi ia dipanggil dari HTML. Ini boleh menyebabkan ralat. Untuk menyelesaikan masalah ini, anda harus mentakrifkan fungsi
menggunakan kaedah FullPage.js untuk melumpuhkan dan mendayakan penatalan. Jika anda tidak menggunakan FullPage.js, atau ia tidak dimulakan dengan betul, kaedah ini tidak akan berfungsi. Anda harus menyemak bahawa FullPage.js disertakan dan dimulakan dengan betul dalam projek anda.disableFullPageScroll
和enableFullPageScroll
的preventDefault
和stopPropagation
方法可能不足以阻止所有情况下的滚动。在模态框打开时,您可能还需要将overflow
样式设置为hidden
,并在模态框关闭时将其重置为auto
dalam tatal pengendali acara: