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

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 :

    <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>

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 :

1. 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

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!