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

Avec BootStrap 3, vous pouvez essayer ceci :-.

var visible_modal = jQuery('.modal.in').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
    jQuery('#' + visible_modal).modal('hide'); // close modal
}

Testé pour travailler avec : http://getbootstrap.com/javascript/#modals (cliquez d'abord sur "Lancer la modale de démonstration").

Answer 2

J'ai exactement le même problème, et ma solution est seulement si le dialogue modal a l'attribut [role="dialog"] :

/*
* Find and Close current "display:block" dialog,
* if another data-toggle=modal is clicked
*/
jQuery(document).on('click','[data-toggle*=modal]',function(){
  jQuery('[role*=dialog]').each(function(){
    switch(jQuery(this).css('display')){
      case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;}
    }
  });
});

Answer 3

J'ai eu le même problème que @Gravity Grave où le défilement ne fonctionne pas si vous utilisez

data-toggle="modal" data-target="TARGET-2" 

en collaboration avec

data-dismiss="modal"

Le défilement ne fonctionne pas correctement et revient à faire défiler la page plutôt que la modale. Ceci est dû à data-dismiss qui supprime la classe modal-open de la balise.

Ma solution a consisté à définir le code html du composant interne de la modale et à utiliser des éléments css pour faire apparaître ou disparaître le texte en fondu.

Answer 4

J'ai eu le même problème, je l'écris ici au cas où quelqu'un à l'avenir tomberait sur ce produit et aurait des problèmes avec multiple les modaux qui doivent avoir défilement également (j'utilise Bootstrap 3.3.7)

Ce que j'ai fait, c'est d'avoir un bouton comme celui-ci dans ma première modale :

<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>

Il masquera la première et affichera la seconde, et dans la seconde modale, j'aurai un bouton de fermeture qui ressemblera à ceci :

<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>

Cela fermera la deuxième modale et ouvrira la première et pour faire défilement J'ai ajouté cette ligne à mon fichier .css :

.modal {
overflow: auto !important;
}

PS : Juste une remarque, vous devez avoir ces modales séparément, la modale mineure ne peut pas être imbriquée dans la première car vous la cachez.

Voici donc l'exemple complet basé sur l'exemple de la modale bootstrap :

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Add lorem ipsum here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
          Open second modal
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"  data-toggle="modal" data-target="#exampleModal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 5

Avec ce code, la modale ouverte est fermée, la nouvelle modale s'ouvre mais la nouvelle modale est fermée immédiatement.

$(nameClose).modal('hide');
$(nameOpen).modal('show');

Ma solution pour ouvrir une nouvelle modale après en avoir fermé une autre est la suivante :

function swapModals(nameClose,nameOpen) {
    $(nameClose).modal('hide');
    $(nameClose).on('hidden.bs.modal', function () {
        console.log('Fired when hide event has finished!');
        $(nameOpen).modal('show');
    });
}