Bagaimana untuk melumpuhkan penatalan apabila modal dibuka - JS Halaman Penuh

Question

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.

<div id="fullpage">
            <div class="section">
                <?php sertakan './home-page/home-page-manufacturing-list.php';?>
                <button id="turnOff" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Buka kotak modal</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="penapis latar belakang bekas">
                <div class="row">
                    <div class="col-12">
                        <h3 class="section-title"></h3>
                    </div>
                    <div class="col-12">
                        <h5>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</h5>
                    </div>
                </div>
            </div>


            
        </div>
    </div>
</div>


<skrip>
    $(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();
            }
        });
    });
</script>

Answer 1

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 fungsi openModal函数。相反，它直接操作模态框的样式。这意味着isModalOpen变量没有被设置为true，disableFullPageScroll函数也没有被调用。要解决这个问题，您应该在按钮被点击时使用openModal yang anda takrifkan dalam skrip:

<button id="openModalButton" class="w3-button w3-black">打开模态框</button>

2. Tag yang menutup kotak modal tidak menggunakan fungsi closeModal. Ia sepatutnya kelihatan seperti ini:

<span id="closeModalButton" class="w3-button w3-display-topright">&times;</span>

3. 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
dalam skop global:

window.closeModal = closeModal;

4. Fungsi

   disableFullPageScroll和enableFullPageScroll

   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.

5. preventDefault和stopPropagation方法可能不足以阻止所有情况下的滚动。在模态框打开时，您可能还需要将的overflow样式设置为hidden，并在模态框关闭时将其重置为auto

   dalam 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. 🎜