Close modal bootstrap automatically when submitting form

3

I have a modal bootstrap that has a contact form:

HTML:

             Thank you! Your form has been successfully submitted and will be answered as soon as possible.             

<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="contactModalLabel">Formulário para contato</h4>
                        </div>
                        <div class="modal-body">

                            <form method="POST" id="ajax_form" action="sendForm.php">
                              <div class="form-group">
                                <label class="control-label">Seu nome:</label>
                                <input type="text" class="form-control" name="name" placeholder="Escreva seu nome">
                              </div>
                              <div class="form-group">
                                <label class="control-label">Seu email:</label>
                                <input type="email" class="form-control" name="email" placeholder="[email protected]">
                              </div>
                              <div class="form-group">
                                <label class="control-label">Assunto:</label>
                                <input type="text" class="form-control" name="subject" placeholder="Escreva o assunto da mensagem">
                              </div>
                              <div class="form-group">
                                <label class="control-label">Mensagem:</label>
                                <textarea class="form-control" id="mensagem" name="message" placeholder="Escreva sua mensagem"></textarea>
                              </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                            <input type="submit" class="btn btn-primary" value="Enviar mensagem">
                             </form>

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

JS:

$('#ajax_form').submit(function(){
      var dados = $( this ).serialize();

      jQuery.ajax({
        type: "POST",
        url: "sendForm.php",
        data: dados,
        success: function(data)
        {
          $("#msg").attr({"style":"display: block;"});
        }
      });

      return false;
    });

  $("#closeModal").on("click", function(){

   $("#msg").attr({"style":"display: none;"});

So far so good, the modal opens correctly, the form is displayed and when I submit the form, the thank you alert appears on the screen. However, I would like a function that, once I send the form, the modal closes automatically, because the alert appears but still stays in the background, with the modal being highlighted ...

Taking advantage of the post, I would also like to ask why the alert takes (about 10 seconds) to appear on the screen. Is it because I'm using ajax in localhost?

    
asked by anonymous 13.01.2017 / 01:21

1 answer

3

You can use modal('hide') .

$('#seu_modal').modal('hide');

This can be done within success .

Example:

$('.abrir').on('click', function(){

  $('.modal').modal('show');  
  
});

$('.fechar').on('click', function(){

  $('.modal').modal('hide'); 

});

$('form').on('submit', function(){

  $('.modal').modal('hide'); 

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><button class="abrir"> Abrir </button><div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="contactModalLabel">Formulário para contato</h4> </div><div class="modal-body"> <form> <div class="form-group"> <label class="control-label">Seu nome:</label> <input type="text" class="form-control" name="name" placeholder="Escreva seu nome"> </div><div class="form-group"> <label class="control-label">Seu email:</label> <input type="email" class="form-control" name="email" placeholder="[email protected]"> </div><div class="form-group"> <label class="control-label">Assunto:</label> <input type="text" class="form-control" name="subject" placeholder="Escreva o assunto da mensagem"> </div><div class="form-group"> <label class="control-label">Mensagem:</label> <textarea class="form-control" id="mensagem" name="message" placeholder="Escreva sua mensagem"></textarea> </div></div><div class="modal-footer"> <button type="button" class="btn btn-default fechar" data-dismiss="modal">Fechar</button> <input type="submit" class="btn btn-primary fechar" value="Enviar mensagem"> </form> </div></div></div></div>
  

The redundancy of click and submit is due to the StackOverflow preview, sometimes it does not allow sending the form, but this is just a demonstration.

    
13.01.2017 / 01:35