Comment garantir la superposition de plusieurs modaux dans le bon ordre dans Bootstrap ?

Comment superposer plusieurs modaux dans le bon ordre

Dans certains scénarios, il devient nécessaire d'afficher plusieurs modaux sur la même page. Cependant, s’assurer que chaque modal apparaisse au-dessus du précédent peut s’avérer difficile. Cet article explore une solution pour superposer les modaux dans le bon ordre, en particulier lorsque plus de deux modaux sont impliqués.

Configuration

Dans l'extrait de code donné, plusieurs modaux ( "#myModal" et "#myModal2") sont programmés pour se lancer via des événements de bouton. Le problème réside dans la façon dont le modal "#myModal2" apparaît derrière le modal "#myModal", plutôt que de le superposer.

Solution

La solution consiste à créer un Fonction JavaScript qui gère efficacement le z-index des modaux et leurs arrière-plans. Cette fonction, élaborée ci-dessous, obtient le comportement souhaité en mettant en œuvre les étapes suivantes :

1. Backdrop Z-Index Fix :

   • A La fonction setTimeout est utilisée pour résoudre le retard dans la création de l'élément .modal-backdrop.
   • À mesure que chaque modal devient visible, son z-index est progressivement incrémenté, garantissant qu'il recouvre le modal précédent.
   • Le z-index .modal-backdrop est défini pour être un de moins que le z-index du modal, ce qui lui permet de servir d'arrière-plan au modal sans l'obscurcir.

2. Correction de la barre de défilement :

   • Lorsqu'un modal qui dépasse la hauteur du navigateur est fermé, le défilement dans les modaux visibles en dessous devient désactivé. Pour résoudre ce problème, une fonction est exécutée lorsqu'un modal est masqué, ce qui réactive le défilement en conservant la classe modal-open sur l'élément body de la page.

Extrait de code

<code class="javascript">$(document).on('show.bs.modal', '.modal', function() {
  const zIndex = 1040 + 10 * $('.modal:visible').length;
  $(this).css('z-index', zIndex);
  setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});

$(document).on('hidden.bs.modal', '.modal', () => $('.modal:visible').length && $(document.body).addClass('modal-open'));</code>

Conclusion

La mise en œuvre de cette solution garantit que plusieurs modaux se superposent dans le bon ordre, la toile de fond apparaissant systématiquement derrière le modal actif. Cette technique a été testée et fonctionne efficacement pour les versions Bootstrap 3.1.0 à 3.3.5.

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!