Close modal when clicking the button

Question

Close modal when clicking the button

Navigation

#1 by (2 votes)
#2 by (-1 votes)

2

Hello, I have this following modal, whenever I click on the "Rejected sale" button it opens, but I wanted to close this same modal every time it clicked on the "Send" button, which in the case and my submit, as I do this?

<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>

html typescript angular

asked by anonymous 20.12.2018 / 16:27

2 answers

Implementation AngularJS consuming data provided by Laravel using CORS Add subquery values separately

score 2 · Answer 1

By the way, you've put two class .btn on the submit button:
<button type="submit" class="btn btn red">Enviar</button>

To close the modal manually you can use the method:

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

For this you create a click event on the submit button:

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

Example:

$(":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><scriptsrc="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>

score -1 · Answer 2

Hm, it's a bit difficult to see the error or help you implement if you do not pass the whole code.
Anyway, if you just need to close the button when you click submit, it implements a normal js, it would look something like:

Add the close class to the HTML button:

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

And, add the JS:

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
  modal.style.display = "none";
}