Comment désactiver le défilement lorsque le modal est ouvert - Full Page JS

Question

Ce que je veux faire, c'est, lorsque le modal est ouvert, désactiver le défilement JavaScript pour toute la page. Le problème est que lorsque j'ouvre le modal et que j'essaie de le faire défiler, le contenu se déplace derrière le modal, qui est la page Web réelle, et je souhaite le désactiver. Lorsque le modal est ouvert, l'arrière-plan doit être gelé.

<div id="fullpage">
            <div class="section">
                <?php inclut './home-page/home-page-manufacturing-list.php';?>
                <button id="turnOff" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Ouvrir la boîte modale</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="filtre d'arrière-plan du conteneur">
                <div class="ligne">
                    <div class="col-12">
                        <h3 class="section-title"></h3>
                    </div>
                    <div class="col-12">
                        <h5>Dans notre entreprise, nous avons une passion pour le travail du bois et cela se voit dans tous nos projets de fabrication et de design d'intérieur. Nous nous spécialisons dans la création de meubles, d'accessoires et d'accessoires en bois sur mesure aussi fonctionnels que beaux</h5>
                    </div>
                </div>
            </div>


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


<script>
    $(document).ready(function() {
        var isModalOpen = faux ;

        // Désactive le défilement FullPage.js lorsque le modal est ouvert
        fonction désactiverFullPageScroll() {
            $.fn.fullpage.setAllowScrolling(false);
            $.fn.fullpage.setKeyboardScrolling(false);
        }

        // Activer le défilement FullPage.js lorsque le modal est fermé
        fonction activerFullPageScroll() {
            $.fn.fullpage.setAllowScrolling(true);
            $.fn.fullpage.setKeyboardScrolling(true);
        }

        //Ouvrir la boîte modale
        fonction openModal (modalId) {
            document.getElementById(modalId).style.display = 'block';
            isModalOpen = vrai ;
            désactiverFullPageScroll();
        }

        // Ferme la boîte modale
        fonction closeModal (modalId) {
            document.getElementById(modalId).style.display = 'aucun';
            isModalOpen = faux ;
            activerFullPageScroll();
        }

        // Gérer les événements de clic sur le bouton pour ouvrir et fermer le modal
        $('#openModalButton').on('clic', function() {
            openModal('id01'); // Remplacez 'id01' par l'ID de votre modal
        });

        $('#closeModalButton').on('clic', function() {
            closeModal('id01'); // Remplacez 'id01' par l'ID de votre modal
        });

        // Gérer les événements de défilement
        $(window).on('scroll', function(event) {
            si (isModalOpen) {
                event.preventDefault();
                event.stopPropagation();
            }
        });
    });
</script>

Answer 1

Le code que vous avez fourni semble correct pour désactiver le défilement lorsque le modal est ouvert. Cependant, il existe plusieurs causes possibles au problème :

1. Le bouton qui ouvre la boîte modale n'utilise pas la fonction openModal函数。相反，它直接操作模态框的样式。这意味着isModalOpen变量没有被设置为true，disableFullPageScroll函数也没有被调用。要解决这个问题，您应该在按钮被点击时使用openModal que vous avez définie dans le script :

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

2. La balise qui ferme la boîte modale n'utilise pas la fonction closeModal. Cela devrait ressembler à ceci :

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

3. closeModal函数没有在全局作用域中定义，但它被从HTML中调用。这可能会导致错误。要解决这个问题，您应该在全局作用域中定义closeModalLa fonction n'est pas définie dans la portée globale, mais elle est appelée depuis HTML. Cela peut provoquer des erreurs. Pour résoudre ce problème, vous devez définir la fonction
dans la portée globale :

window.closeModal = closeModal;

4. La fonction

   disableFullPageScroll和enableFullPageScroll

   utilise les méthodes FullPage.js pour désactiver et activer le défilement. Si vous n'utilisez pas FullPage.js ou s'il n'est pas initialisé correctement, ces méthodes ne fonctionneront pas. Vous devez vérifier que FullPage.js est inclus et initialisé correctement dans votre projet.

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

   dans le gestionnaire d'événements de défilement :

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';
}

Veuillez essayer ces suggestions et faites-moi savoir si cela résout votre problème. 🎜