Switch between modes

Question

I want to make a modal where I can view the registration and if I click to Edit up the other modal, thus switching between forms.

HTML with modal:

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

<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">
       <div class="visualizar">
        <form>
           Exemplo
           <button type="button" class="btn-editar">Editar</button>
        </form>
       </div>

       <div class="form-edita">
         <form>Exemplo2
          <button type="button" class="btn-canc-edit" >Cancelar Edição</button>
         </form>
       </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Javascript:

<script>
$('.btn-editar').on("click", function () {
  $('.form').slideToggle();
  $('.visualizar').slideToggle();
});
$('.btn-canc-edit').on("click", function () {
  $('.visualizar').slideToggle();
  $('.form').slideToggle();
});
</script>

CSS:

<style type="text/css">
.visualizar {
    display: block;
}

.form-edita {
    display: none;
}
</style>

When I click to appear the Edit, it appears, but is not on top of the preview.

Answer 1

you can do the following, replace the toogle() function by directly attacking css. So you change the "display" attribute of the CSS class "view" and edit. showing and hiding the forms. I edited your java script code, see if it helps.

<script>
$('.btn-editar').on("click", function () {
  $('.visualizar').css("display","none");
  $('.form-edita').css("display","block");
});
$('.btn-canc-edit').on("click", function () {
  $('.form-edita').css("display","none");

});
</script>

Answer 2

There’s an easy technique to it:

Delete your script and CSS and try with this code:

<script>
    $(function(){
        $('.form-edita').hide();
        $('.btn-editar').click(function(){
            $('.visualizar').hide();
            $('.form-edita').show();
        });
        $('.btn-canc-edit').click(function(){
            $('.form-edita').hide();
            $('.visualizar').show();
        });
    });
</script>

Moreover, you can create another modal, for example, let this as #modal_view and create one as #modal_edit.

This way, when the user clicks the . btn-edit button that is in the #modal_view, it will hide and display the #modal_edit. Inside the #modal_edit, you can create a button to return to the view modal.

Then it would look like this:

<script>
    $(function(){
        $('.btn-editar').click(function(){
            $('#modal_visualizar').modal("hide");
            $('#modal_editar').modal("show");
        });
        $('.btn-canc-edit').click(function(){ // Este botão ficará no #modal_editar
            $('#modal_editar').modal("hide");
            $('#modal_visualizar').modal("show");
        });
    });
</script>

Well, I would particularly make the second option as it will have a much more pleasant effect for the end user.

I hope I helped you :)