Comment garantir un empilement modal correct avec plusieurs modaux dans Bootstrap ?

Superposition de plusieurs modaux

Dans une interface avec plusieurs modaux, il est crucial de s'assurer que les modaux ouverts s'empilent correctement, à chaque nouveau modal apparaissant au-dessus des précédents. Cependant, un problème courant rencontré par les développeurs est que les modaux suivants peuvent s'afficher derrière ceux existants, créant une superposition indésirable.

Pour résoudre ce problème, une solution impliquant la modification de la propriété z-index des arrière-plans modaux et ses éléments sont présentés.

Backdrop z-index Fix

Pour garantir le bon ordre d'empilement des fonds modaux, une solution sur mesure est mise en œuvre. Plus précisément, une fonction setTimeout est utilisée, car l'arrière-plan modal n'est pas présent lors du déclenchement de l'événement show.bs.modal.

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

Cette approche possède plusieurs avantages clés :

• Il fonctionne efficacement pour chaque modal de la page, y compris ceux créés dynamiquement.
• La toile de fond recouvre instantanément le modal en dessous, ce qui entraîne un empilement transparent.

z-index Calcul

Dans les cas où des valeurs d'index z personnalisées sont préférées, une méthode alternative pour calculer l'index z le plus élevé de la page peut être utilisée :

<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 problèmes potentiels de défilement lorsqu'un modal s'étend au-delà de la hauteur du navigateur, un script supplémentaire peut être implémenté :

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

Compatibilité des versions

La solution présentée a été minutieusement testée et confirmée pour fonctionner efficacement avec 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!