3

Ola, eu tenho essa seguinte modal, sempre que eu clico no botao "Recusou venda" ele abre, porem eu queria fechar essa mesma modal toda vez que ele clicasse no botao "Enviar", que no caso e meu submit, como eu faço isso?

<div class="chat-form">
    <button data-toggle="modal" href="#redModal"  class="btn btn-block red">Recusou venda</button>
  </div>
<!-- Modal info adicionais -->
<div id="redModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title"> <i class="fa fa-checker"></i> Recusou</h4>
          </div>
          <div class="modal-body text-center">
              <h3 class="blue-hoki">Recusou a venda</h3>
              <br>
              <form [formGroup]="rForm" (ngSubmit)="recusouVenda(rForm.value)">
                  <div class="row form-modal">
                      <div class="form-group col-md-12">
                          <label>Comentario:
                              <div class="input-group">
                                  <textarea [value]="valorInput" cols="30" rows="10" class="form-control" type="text" formControlName="comentario"></textarea>
                              </div>
                          </label>
                      </div>

                      <br><br><br>
                      <button type="submit" class="btn btn red">Enviar</button>
                  </div>

              </form>
          </div>
      </div>

  </div>
</div>
12
  • Tem que postar seu código completo, com o JavaScript também. Mas seria dar um preventDefault no submit do botão e colocar a função de fechar dentro do evento de submit. Commented 20/12/2018 às 15:29
  • eu nao uso o javascript em nada da modal Commented 20/12/2018 às 15:30
  • Quando clica em "enviar" a página não é submetida (recarregada)?
    – Sam
    Commented 20/12/2018 às 15:33
  • O projeto e feito em angular, então nao e recarregado nada Commented 20/12/2018 às 15:34
  • 1
    Bom, não estou entendendo muito bem como você fez, mas, não bastaria apenas adicionar isto data-dismiss="modal" no botão enviar??
    – LeAndrade
    Commented 20/12/2018 às 16:09

1 Resposta 1

3

A propósito, você colocou duas class .btn no botão de submit:

<button type="submit" class="btn btn red">Enviar</button>

Para fechar o modal de forma manual você pode usar o método:

$("#redModal").modal('hide');

Para isso você cria um evento de click no botão submit:

$(":submit").on("click", function(){
    $("#redModal").modal('hide');
});

Exemplo:

$(":submit").on("click", function(){
    $("#redModal").modal('hide');
});

// as linhas abaixo são apenas para não submeter o form. Não copie

$("form").submit(function(e){
   e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="chat-form">
    <button data-toggle="modal" href="#redModal"  class="btn btn-block red">Recusou venda</button>
  </div>
<!-- Modal info adicionais -->
<div id="redModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title"> <i class="fa fa-checker"></i> Recusou</h4>
          </div>
          <div class="modal-body text-center">
              <h3 class="blue-hoki">Recusou a venda</h3>
              <br>
              <form [formGroup]="rForm" (ngSubmit)="recusouVenda(rForm.value)">
                  <div class="row form-modal">
                      <div class="form-group col-md-12">
                          <label>Comentario:
                              <div class="input-group">
                                  <textarea [value]="valorInput" cols="30" rows="10" class="form-control" type="text" formControlName="comentario"></textarea>
                              </div>
                          </label>
                      </div>

                      <br><br><br>
                      <button type="submit" class="btn btn red">Enviar</button>
                  </div>

              </form>
          </div>
      </div>

  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .