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

Il suffit de fermer toutes les modales ouvertes avant d'en ouvrir une nouvelle.

$('.modal').modal('hide'); // close all open modals
$('#login').modal('show'); // open a modal named #login

Answer 2

Utilisation de la fonction de clic :

$('.btn-editUser').on('click', function(){
    $('#viewUser').modal('hide'); // hides modal with id viewUser 
    $('#editUser').modal('show'); // display modal with id editUser
});

Levez la tête :

Assurez-vous que celle que vous voulez afficher est une modale indépendante.

Answer 3

En premier modal :

remplacer le lien de renvoi de la modale dans le pied de page par le lien de fermeture ci-dessous.

<div class="modal-footer">
      <a href="#"  data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a>
</div>

En deuxième modal :

Ensuite, dans la deuxième modalité, remplacez la div supérieure par la balise div inférieure.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">

Answer 4

Essayez ceci

    $('#model1').modal('hide');
setTimeout(function(){
    $('#modal2').modal('show');
},400);

Answer 5

$("#buttonid").click(function(){
    $('#modal_id_you_want_to_hid').modal('hide')
});

// same as above button id
$("#buttonid").click(function(){
$('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});