Bootstrap: Ouvrir un autre modal dans un modal

Question

Donc, j'utilise ce code pour ouvrir une autre fenêtre modale dans une fenêtre modale actuellement ouverte :

Cliquez

Ce qui se passe, c'est que pendant environ 500 ms, la barre de défilement se duplique. Je suppose que c'est parce que la fenêtre modale actuelle est encore en train de disparaître. Cependant, cela semble très peu fluide et saccadé.

Je vous serais reconnaissant de toute suggestion pour résoudre ce problème.

Aussi, est-il professionnel de construire cela dans un événement onclick ?

Je travaille avec la version bootstrap 3.0.

Modifier : Je suppose qu'il est nécessaire de réduire le temps de disparition d'une fenêtre modale. Comment est-ce possible ?

Answer 1

data-dismiss permet de forcer la fermeture de la fenêtre modale actuelle

data-toggle ouvre une nouvelle fenêtre modale avec le contenu href à l'intérieur

Cliquez

ou

Cliquez

fais-nous savoir si cela fonctionne.

• Vous voudrez peut-être aussi jeter un coup d'œil à la Documentation des Modals

Answer 2

Ma solution ne ferme pas le modal inférieur, mais se superpose vraiment à celui-ci. Il conserve correctement le comportement de défilement. Testé dans Bootstrap 3. Pour que les modales s'empilent comme prévu, vous devez les ordonner dans votre balisage Html du plus bas au plus haut.

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

MISE À JOUR : Lorsque vous avez des modales empilées, tous les fonds apparaissent en dessous du modal le plus bas. Vous pouvez corriger cela en ajoutant le CSS suivant :

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

Cela donnera l'apparence d'un fond de modal en dessous du modal visible le plus haut. De cette manière, il grise vos modales inférieurs en dessous.

Answer 3

Bootstrap 5 (beta) - mise à jour 2021

La valeur par défaut de z-index des modales a changé pour 1060. Par conséquent, pour remplacer les modales et le fond, utilisez..

.modal:nth-of-type(even) {
    z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1061 !important;
}

Bootstrap 5 modales multiples

---

Bootstrap 4 - mise à jour 2019

J'ai trouvé que la plupart des réponses semblaient contenir beaucoup de code jQuery inutile. Ouvrir une modale depuis une autre modale peut être facilement fait en utilisant les événements que Bootstrap fournit tels que show.bs.modal. Vous pourriez également avoir besoin de quelques CSS pour gérer les superpositions de fenêtres contextuelles. Voici 3 scénarios de "modales multiples"...

Ouvrir une modale depuis une autre modale (garder la 1ère modale ouverte)

Ouvrir la modale

              Titre de la modale    
              ×

              ...
              Ouvrir la modale 2

              Fermer

              Titre de la 2ème modale
              ×

              ..

              Fermer
              Enregistrer les modifications

Un problème potentiel dans ce cas est que le fond de la 2ème modale cache la 1ère modale. Pour éviter cela, définissez le data-backdrop="static" pour la 2ème modale, et ajoutez quelques CSS pour ajuster les z-index des fonds...

/* correction du fond de la modale */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://codeply.com/go/NiFzSCukVl

---

Ouvrir une modale depuis une autre modale (fermer la 1ère modale)

Ceci est similaire au scénario précédent, mais puisque nous fermons la 1ère modale lorsque la 2ème est ouverte, il n'y a pas besoin de correction CSS pour le fond. Une fonction simple qui gère l'événement show.bs.modal de la 2ème modale ferme la 1ère modale.

$("#myModal2").on('show.bs.modal', function (e) {
    $("#myModal1").modal("hide");
});

https://codeply.com/go/ejaUJ4YANz

---

Ouvrir une modale à l'intérieur d'une autre modale

Le dernier scénario de modales multiples consiste à ouvrir la 2ème modale à l'intérieur de la 1ère modale. Dans ce cas, le balisage de la 2ème est placé à l'intérieur de la 1ère. Aucun CSS ou jQuery supplémentaire n'est nécessaire.

                Titre de la modale
                ×

                ...
                Ouvrir la modale 2

                Fermer

                    Titre de la 2ème modale
                    ×

                    ...

                    Fermer
                    Enregistrer les modifications

https://codeply.com/go/iSbjqubiyn

Answer 4

Pour ouvrir une autre fenêtre modale dans une fenêtre modale actuellement ouverte,
vous pouvez utiliser bootstrap-modal

bootstrap-modal DEMO

Answer 5

Essayez ceci

  Ouvrir le modal 1

        Ouvrir le modal 2

        contenu