1
First of all I have to say that I’m starting now to work with JavaScript
, I’m sorry if I misspell the name of something or talk some nonsense, come on.
My goal is to have a modal with steps, with buttons Carry on and Come back, i found a reference in which the user shows this perfectly, however, only with the button to continue.
So I created and started trying to make the button Come back work, but to no avail. When I get back to (info_main) and then I click on Carry on, is displayed all the steps together.
// MODAL COM ETAPAS (NEXT or LAST)
$(() => {
var verifica_etapas = false;
$('.color').hide();
$('.checks').hide();
$('.modal-footer-etapas').hide();
// CONTINUAR ETAPAS
$('.next_modal').on('click', () => {
verifica_etapas = !verifica_etapas;
if(verifica_etapas) {
$('.color').show();
$('.info_principais').hide();
} else {
$('.checks').show();
$('.color').hide();
$('.modal-footer-etapas').show();
}
})
// VOLTAR ETAPAS
$('.last_modal').on('click', () => {
verifica_etapas = !verifica_etapas;
if(verifica_etapas) {
$('.info_principais').show();
$('.color').hide();
}
})
})
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<div class="modal fade" id="add_produtos" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated flipInX">
<div class="modal-body">
<form method="POST">
<div class="info_principais">
<h3> Etapa informações principais...</h3>
<button type="button" class="btn btn-success mt-3 next_modal">CONTINUAR</button>
<button type="button" class="btn btn-dark mt-3" data-dismiss="modal">FECHAR</button>
</div>
<div class="form-group color">
<h3> Etapa de cores...</h3>
<button type="button" class="btn btn-success mt-3 next_modal">CONTINUAR</button>
<button type="button" class="btn btn-dark mt-3 last_modal">VOLTAR</button>
</div>
<div class="form-group checks">
<h3> Etapa de checks...</h3>
<!--Botão de enviar aparece aqui...-->
</div>
<!-- BOTÃO DE ENVIAR! -->
<div class="modal-footer-etapas">
<button type="submit" class="btn btn-primary mt-3"> CADASTRAR</button>
<button type="button" class="btn btn-dark mt-3 last_modal">VOLTAR</button>
</div>
</form>
</div>
</div>
</div>
</div>
Reference: Click here
https://codepen.io/adambui/pen/KmJwdw
– user60252
your code is not functional
– user60252
thanks @Leocaracciolo, with this example, I managed to finish!
– Web Developer