Comment garantir que plusieurs modaux se superposent correctement avec un arrière-plan visible dans Bootstrap ?

Superposition de plusieurs modaux

Dans ce scénario, vous souhaitez que la superposition apparaisse au-dessus du premier modal, plutôt que derrière lui.

Solution

Inspirée des contributions de @YermoLamers et @Ketwaroo, une solution complète implique :

Backdrop Z-Index Fix

Pour résoudre le problème de la toile de fond apparaissant derrière le premier modal, implémentez le JavaScript suivant :

<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'));
});</code>

Personnalisation de l'index Z

Si vous le souhaitez pour personnaliser le calcul du z-index, vous pouvez utiliser les éléments suivants :

<code class="javascript">const zIndex = 10 +
  Math.max(...Array.from(document.querySelectorAll('*')).map((el) => +el.style.zIndex));</code>

Correction de la barre de défilement

Pour résoudre les cas où la fermeture d'un deuxième modal empêche le défilement dans un modal qui dépasse la hauteur du navigateur, incluez le JavaScript suivant :

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

Versions

Cette solution est minutieusement testée avec les versions Bootstrap 3.1.0 à 3.3.5. En implémentant cette solution, vous pouvez vous assurer que plusieurs modaux se superposent correctement, la toile de fond apparaissant au-dessus du premier modal et la barre de défilement restant fonctionnelle selon les besoins.

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!