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

Je sais que c'est une réponse tardive, mais elle pourrait être utile. Voici une façon correcte et propre de le faire, comme @karima l'a mentionné ci-dessus. Vous pouvez en fait lancer deux fonctions à la fois ; trigger y dismiss le modal.

Balisage HTML ;

<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>

<div class="modal fade" id="SELECTOR" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body"> ... </div>
     <div class="modal-footer">           <!--  -->  <!--            -->
      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
     </div>
   </div>
  </div>
</div>

Démo

Answer 2

Sans voir le code spécifique, il est difficile de vous donner une réponse précise. Toutefois, d'après la documentation de Bootstrap, vous pouvez masquer la modale de la manière suivante :

$('#myModal').modal('hide')

Ensuite, affichez une autre modale une fois qu'elle est cachée :

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

Vous allez devoir trouver un moyen de pousser l'URL vers la nouvelle fenêtre modale, mais je suppose que c'est trivial. Sans voir le code, il est difficile de donner un exemple de cela.

Answer 3

Ce n'est pas exactement la réponse mais c'est utile lorsque vous voulez fermer la modale actuelle et ouvrir une nouvelle modale.

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>

Answer 4

J'utilise cette méthode :

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});

Answer 5

Problème avec data-dismiss="modal" c'est qu'il va déplacer votre contenu vers la gauche

Je partage ce qui a marché pour moi, le problème était d'ouvrir pop1 de pop2

CODE JS

var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
    if (showPopup2) {
        $('#popup2').modal('show');
        showPopup2 = false;
    }
});

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});