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

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>

Answer 1

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>