Close modal when you click the button

Asked

Viewed 5,045 times

3

Hello, I have this following modal, whenever I click on the button "Refused sale" it opens, however I wanted to close this same modal every time he clicked on the button "Send", that in the case is my Submit, how I do it?

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

  • You have to post your complete code, with Javascript as well. But it would give a preventDefault on the button Submit and put the close function inside the Submit event.

  • i don’t use javascript at anything of modal

  • When you click "send" the page is not submitted (reloaded)?

  • The design is angled, so nothing is reloaded

  • I couldn’t understand your question, it seems a little vague, I tested your code and when I click to send it closes normally.

  • There is no way to make it close by javascript or something not?

  • But if you’re using Angular, don’t just go into the Typescript file of the component that created the modal and instantiate the method close-up()??

  • That is not another Component, and in the same

  • Indifferent to where he created the modal, he could put his ts also in the question.

  • but there is literally nothing in my ts, it works by itself, only and exclusively in html

  • 1

    Well, I don’t quite understand how you did it, but it wouldn’t be enough to just add this data-Dismiss="modal" on the send button??

  • Which version of Bootstrap are you using? I believe doing what @Leandrade said was right!

Show 7 more comments

2 answers

3

By the way, you put two classes .btn on the Ubmit 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 an event by clicking 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>
<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>

0

Hm, it gets a little hard to see the bug or help you implement if you don’t pass the entire code.
Anyway, if you just need to close the button when you click the submit, implements a even standard js, it would be something like:

Add class close-up on the HTML button:

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

E, add the JS:

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

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

  • 3

    This only takes the modal off the screen, but ai vc loses the effect of Fade, and tab leaves a lot of classes in various other elements...

Browser other questions tagged html angular typescript

You are not signed in. Login or sign up in order to post.