Pourquoi mon modal Bootstrap apparaît-il derrière la superposition d'arrière-plan ?-tutoriel CSS-php.cn

Pourquoi mon modal Bootstrap apparaît-il derrière la superposition d'arrière-plan ?

Linda Hamilton

Libérer： 2024-12-19 18:56:10

original

892 Les gens l'ont consulté

Why is my Bootstrap Modal Appearing Behind the Background Overlay?

Bootstrap Modal caché sous l'arrière-plan

Problème :

Malgré le suivi de la documentation officielle de Bootstrap, un modal apparaît sous la superposition d'arrière-plan, empêchant interaction.

Reproduire le problème :

Le code permettant de reproduire le problème est similaire à l'exemple ci-dessous :

<body>
    <p>Lorem ipsum dolor sit amet.</p>

    <div class="my-module">
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>

Copier après la connexion

Root Cause :

Le conteneur modal (avec la classe "fade") peut devenir masqué lorsqu'il a un position autre que celle par défaut, telle que fixe ou relative. Ce problème se produit lorsque le conteneur modal ou ses éléments parents sont positionnés différemment.

Résolution :

Pour résoudre le problème, assurez-vous que le conteneur modal et ses éléments parents ont la position par défaut. Il existe deux approches pour y parvenir :

Déplacer le modal en dehors des éléments positionnés :
- Déplacer le div modal en dehors de tous les éléments avec des positionnement (par exemple, avant la fermeture tag).
Supprimer les propriétés de position :
- Supprimer les propriétés CSS "position" du conteneur modal et de son ancêtres jusqu'à ce que le modal devienne visible. Cependant, cela peut affecter la mise en page et les fonctionnalités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!