par

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>

1 Réponse

+1 validé
par

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>

Tendances

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...