Bagaimana untuk melumpuhkan penatalan apabila modal dibuka - JS Halaman Penuh
P粉090087228
P粉090087228 2023-08-18 00:15:20
0
1
403

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.

×

Di syarikat kami, kami mempunyai minat untuk kerja kayu dan ia ditunjukkan dalam semua projek fabrikasi dan reka bentuk dalaman kami. Kami pakar dalam mencipta perabot kayu tersuai, lekapan dan aksen yang berfungsi kerana ia cantik
$(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(); } }); });
P粉090087228
P粉090087228

membalas semua (1)
P粉805535434

Kod yang anda berikan nampaknya betul untuk melumpuhkan penatalan apabila modal dibuka. Walau bagaimanapun, terdapat beberapa kemungkinan punca masalah:

  1. Butang yang membuka kotak modal tidak menggunakan fungsiopenModal函数。相反,它直接操作模态框的样式。这意味着isModalOpen变量没有被设置为truedisableFullPageScroll函数也没有被调用。要解决这个问题,您应该在按钮被点击时使用openModalyang anda takrifkan dalam skrip:
  1. Tagyang menutup kotak modal tidak menggunakan fungsicloseModal. Ia sepatutnya kelihatan seperti ini:
×
  1. closeModal函数没有在全局作用域中定义,但它被从HTML中调用。这可能会导致错误。要解决这个问题,您应该在全局作用域中定义closeModalFungsi ini tidak ditakrifkan dalam skop global, tetapi ia dipanggil dari HTML. Ini boleh menyebabkan ralat. Untuk menyelesaikan masalah ini, anda harus mentakrifkan fungsi
  2. dalam skop global:
    window.closeModal = closeModal;
  1. Fungsi

    disableFullPageScrollenableFullPageScroll

    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.
  2. preventDefaultstopPropagation方法可能不足以阻止所有情况下的滚动。在模态框打开时,您可能还需要将

    overflow样式设置为hidden,并在模态框关闭时将其重置为autodalam tatal pengendali acara:

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'; }
Sila cuba cadangan ini dan beritahu saya jika ia menyelesaikan masalah anda.
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!