Comment réparer les modaux qui se chevauchent dans Bootstrap : une solution simple avec setTimeout et Z-Index Management.

Plusieurs modaux se superposant facilement

Rencontrer plusieurs modaux se superposant les uns aux autres peut être frustrant, surtout lorsque vous avez besoin que le nouveau modal apparaisse en haut à la place de derrière l'existant. Pour résoudre ce problème, nous allons explorer une solution inspirée par deux brillants contributeurs : @YermoLamers et @Ketwaroo.

Backdrop Z-Index Fix

Cette solution s'appuie sur une fonction setTimeout, car l'élément .modal-backdrop n'est pas encore créé lorsque l'événement show.bs.modal est déclenché.

<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 présente plusieurs avantages :

• Il s'applique à tous les éléments .modal de la page, y compris ceux créés dynamiquement.
• La toile de fond superpose immédiatement le modal précédent.

Calcul de l'index Z

Si vous préférez ne pas coder en dur le z-index, vous pouvez calculer dynamiquement le z-index le plus élevé de la page :

<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

Dans les cas où un modal dépasse la hauteur du navigateur, vous pouvez rencontrer des problèmes de défilement lors de la fermeture d'un modal interne. Pour résoudre ce problème, ajoutez ce qui suit :

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

Compatibilité

Cette solution a été testée avec les versions Bootstrap 3.1.0 - 3.3.5.

Exemple JSFiddle

[Exemple JSFiddle](https://jsfiddle.net/)

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!