Modal disappear after 3 seconds

Asked

Viewed 201 times

1

I have an upload form that successfully performed, a modal appears.

 <form method="post" id="form-upload" novalidate enctype="multipart/form-data">
        <label for="email" style="font-weight: normal"><strong>Formato permitido:</strong> JPG, JPEG e PNG<br><strong>Tamanho da imagem:</strong> 1170 x 300</label>
         <div class="md-group-add-on">
          <span class="md-add-on-file">
              <button class="btn btn-primary waves-effect waves-light">Foto</button>
          </span>
      <div class="md-input-file">
          <input type="file" id="fotoCapa" name="FotoCapa"/>
          <input type="text" class="md-form-control md-form-file">
          <label class="md-label-file"></label>
      </div>
    </div>
        <div id="sucesso"></div>
    </form>

<script type="text/javascript">
$(function(){
    $('#fotoCapa').change(function(e) {
      e.preventDefault();
      var formData = new FormData();
      formData.append('FotoCapa', $('#fotoCapa').prop('files')[0]);
      $.ajax({
          url: 'alterar-foto-capa.php',
          data: formData,
          type: 'post',
          success: function(response){

             var status = JSON.parse(response);

              if(status.Status === 0){
                  $('#sucesso').html("<div class='alert alert-success'>A foto foi alterada com sucesso!</div>");
                  $('#fotoCapa').val("");
              }else{
                 $('#sucesso').html("<div class='alert alert-danger'>" + status.Status + "</div>");
             }
              console.log(response);
          },
          processData: false,
          cache: false,
          contentType: false
      });
   });
});
</script>

I wish after 3 seconds the modal disappeared. I tried with the code below, but it didn’t work:

<script>
$(document).ready(function(){
 $("div.alert").fadeIn( 300 ).delay( 3000 ).fadeOut( 400 );
});
</script>
jquery

2 answers

1


Your code is working, but have put it AFTER the if:

if(status.Status === 0){
   $('#sucesso').html("<div class='alert alert-success'>A foto foi alterada com sucesso!</div>");
   $('#fotoCapa').val("");
}else{
   $('#sucesso').html("<div class='alert alert-danger'>" + status.Status + "</div>");
}
$("div.alert").fadeIn( 300 ).delay( 3000 ).fadeOut( 400 );

Example:

if(0 === 0){
   $('#sucesso').html("<div class='alert alert-success'>A foto foi alterada com sucesso!</div>");
   $('#fotoCapa').val("");
}else{
   $('#sucesso').html("<div class='alert alert-danger'>" + status.Status + "</div>");
}
$("div.alert").fadeIn( 300 ).delay( 3000 ).fadeOut( 400 );
.alert{
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sucesso"></div>

0

I would do so

if(status.Status === 0){
              $('#sucesso').html("<div class='alert alert-success'>A foto foi alterada com sucesso!</div>");
              $('#fotoCapa').val("");
              setTimeout('$("div.alert").fadeOut( 300 )', 3000);
}

OR

  if(status.Status === 0){
          $('#sucesso').html("<div class='alert alert-success'>A foto foi alterada com sucesso!</div>");
          $('#fotoCapa').val("");

          setTimeout(function(){
              $("div.alert").fadeOut( 300 )
          }, 3000);

  }

http://jsfiddle.net/jwpxvnz6/15/

Browser other questions tagged jquery

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