Modale Bootstrap : fermer l'actuelle, ouvrir la nouvelle

Question

J'ai cherché pendant un certain temps, mais je ne trouve pas de solution à ce problème. Je veux ce qui suit :

• Ouvrez une URL à l'intérieur d'une modale Bootstrap. J'ai fait en sorte que cela fonctionne. Le contenu est donc chargé dynamiquement.
• Lorsqu'un utilisateur appuie sur un bouton à l'intérieur de cette modale, je veux que la modale actuelle se cache, et immédiatement après, je veux qu'une nouvelle modale s'ouvre avec la nouvelle URL (sur laquelle l'utilisateur a cliqué). Le contenu de la deuxième modale est également chargé dynamiquement.
• Si l'utilisateur ferme ensuite cette 2ème modale, la première modale doit revenir.

Cela fait des jours que je regarde ça, j'espère que quelqu'un pourra m'aider.

Merci d'avance.

Answer 1

Comme mentionné ci-dessus, dans le html du même bouton, vous pouvez demander de fermer la modale actuelle avec data-dismiss et d'ouvrir directement une nouvelle modale avec data-target :

<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>

Mais cela fera disparaître la barre de défilement et vous remarquerez que si la deuxième modale était plus haute que la première

La solution consiste donc à ajouter le style suivant dans le style en ligne de la modale :

Style = "overflow-y : scroll ; "

Answer 2

En utilisant le code suivant, vous pouvez masquer la première modale et ouvrir immédiatement la deuxième modale, en utilisant la même stratégie, vous pouvez masquer la deuxième modale et afficher la première.

$("#buttonId").on("click", function(){
    $("#currentModalId").modal("hide");
    $("#currentModalId").on("hidden.bs.modal",function(){
    $("#newModalId").modal("show");
    });
});

Answer 3

Vous devez ajouter l'attribut suivant au lien ou au bouton où vous voulez ajouter cette fonctionnalité :

 data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"

Un blog détaillé : http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

Answer 4

data-dismiss="modal" 

il est utilisé pour fermer le modèle ouvert existant. vous pouvez le définir comme le nouveau modèle

Answer 5

Pour Bootstrap v4

Vous pouvez basculer entre les modales en mettant data-dismiss="modal" y data-toggle="modal" dans le même élément HTML. Vous auriez également besoin de l'élément data-target défini sur la modale que vous souhaitez ouvrir.

Voici un exemple :

<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#Modal2" >
Open second modal
</button>

N'oubliez pas de définir un identifiant pour chacune des fenêtres modales et de faire en sorte que la cible des données pointe vers celle que vous souhaitez ouvrir.

Pour bootstrap v5

Comme la v4, mais en utilisant les attributs data-bs-toggle data-bs-dismiss y data-bs-target

Comme ça :

<button class="btn btn-primary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#Modal2" >
Open second modal
</button>

Ils ont inclus un exemple de ceci dans la documentation de la v5

NOTE :

Les deux modaux doivent être indépendants l'un de l'autre, et non imbriqués l'un dans l'autre, pour que cela fonctionne. Ainsi, si vous utilisez un cadre MVC, par exemple ASP.NET MVC, et que la première modale constitue sa propre vue partielle, vous ne pouvez pas placer la deuxième modale dans cette vue. Vous devrez placer la deuxième modale dans la vue parent.