Comment gérer deux modales Bootstrap Twitter qui se chevauchent

J'ai un standard Twitter Bootstrap modal sur ma page:

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Comments</h3>
  </div>
  <div class="modal-body">
    <p>Please provide a comment:</p>
    <textarea id="comment"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-primary">Save comment</a>
  </div>
</div>

Maintenant, je suis d'enregistrer le commentaire via AJAX et fermer la modale lorsqu'un jet de sauvegarde qui se passe. Cependant, j'ai un mondial AJAX gestionnaire d'erreurs, qui lui-même ouvre un modal lorsque tous les appels AJAX rencontre une erreur (et pas seulement pour les commentaires appel AJAX):

<div id="error-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Error</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
    </div>
</div>

Modale des-corps est rempli par le gestionnaire d'erreur et, par défaut, le nouveau modal est placé sur le dessus de l'existant modal. Cependant, le modal toile de fond pour la nouvelle modal est derrière l'original modal, ce qui permet encore l'interaction avec elle.

Est-il un moyen de donner l'erreur modal toile de fond une autre z-index? Maintenant, le modal toile de fond est modale agnostique et ne pas avoir un modal id/class.

Ou il y a des bons plugins qui traitent de multiples Twitter Bootstrap des modaux?

source d'informationauteur Steve

8

Il pourrait être utile de vérifier ce Modal Bootstrap plugin.

Dans la démo ici...

http://jschr.github.io/bootstrap-modal/

...l'un des exemples qui a "Empilables" les auxiliaires modaux, et aussi loin que je peux dire, vous n'êtes pas en mesure d'interagir avec l'ancien modal derrière la nouvelle modal; c'est à dire, vous devez d'abord cliquer sur l'arrière-plan de la nouvelle modal afin de rendre la nouvelle modal en aller et d'accéder à l'ancien modal. (Note de l'exemple ne donne différentes ids à chaque modal.)

En aparté, j'ai considéré l'utilisation de ce plugin à un moment, mais je pense qu'en partie, cet article fournit un argument pour ne pas utiliser les auxiliaires modaux pour d'édition en ligne: http://www.keepitslickstupid.com/3-essential-ux-ideas/ (voir la section 3, "les boîtes de dialogue Modales sont tellement 2002")
3

C'est la façon dont j'ai abordé cette question. J'ai été à l'affiche des messages d'erreur à partir d'un appel AJAX a commencé au sein de l'modal dans un bootbox. Il a causé des dégâts. Alors, voici ce que j'ai fait pour le z-index:
```
.bootbox.modal {
    z-index: 1070;
}

.bootbox.modal + .modal-backdrop {
    z-index: 1060;
}
```
Ce qui se passe ici est que la première z-index pour la toile de fond est de 1040 et le modal est 1050. Comme bootbox ajoute un modal et de toile de fond à la fin de la page, j'ai donné le bootbox un z-index de 1070, de sorte qu'il reste sur le top absolu, et a utilisé le "+" sélecteur CSS pour ne sélectionner que le modal-toile de fond qui vient directement après le bootbox, et a changé son z-index à 1060. Ce maintenant chevauche la précédente modal, permettant de se concentrer pour rester sur le bootbox.

Si vous ne l'utilisez pas bootbox, je pense que vous pouvez affecter une classe personnalisée pour le secondaire modal et de travailler votre chemin à partir de là. Je n'ai pas vu comment le modal des toiles de fond de la pile si vous avez prédéfinis des modaux, mais juste inspecter les éléments et choisissez votre sélecteur CSS en conséquence.

Acclamations
1

Cela pourrait être un non-réponse selon votre point de vue, mais je vais lui donner un aller:

J'ai affronté le même problème il y a longtemps. Au lieu d'ouvrir un autre modal, j'ai décidé de faire de l'ajax gestionnaire d'erreur tout simplement ajouter le message d'erreur à la déjà ouvert modal (si il y en a aucun, un vide modal est ouvert pour la première fois).

C'est plus simple en termes de programmation (pas d'autre hack ou plugin requis) et à mon humble avis également à partir de la perspective de l'utilisateur. Parfois moins est plus.

Je laisse la décision quant à l'approche à choisir celui qui pourrait venir à travers cette dans la furure...

Vous devez vous connecter pour publier un commentaire.