Comment passer d'un Modal à l'autre avec Bootstrap ?

Réponses rédigées par Antoine

Dernière mise à jour : 2018-01-19 13:35:55

Question

J'ai un premier Modal Bootstrap avec un bouton Suivant, je voudrais que lorsqu'on clic sur ce bouton, le premier Modal se ferme et que le second s'ouvre.

Voici le code des Modals :

<div class="modal" id="modal01" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Titre Modal 1</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>xxxxxxxxxxxx</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Suivant</button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="modal02" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Titre Modal 2</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>xxxxxxxxxxxx</p>
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Terminer</button>
      </div>
    </div>
  </div>
</div>

Réponse

Tu peux le faire avec JavaScript, tu ajoutes un id au bouton suivant :

id="suivant"

et ensuite:

<script type="text/javascript">
$("#suivant").click(function(){
  $('#modal01').modal('hide');
  $('#modal02').modal('show');
});
</script>