How to hide a modal window after a while?

Asked

Viewed 2,732 times

5

Colleagues.

I don’t know if I was clear in my doubt, but I would like the Bootstrap modal to disappear automatically after the deletion confirmation. For example: user will delete a product, appeared the message: "Product deleted successfully". The modal was active for about 3 seconds and then disappeared. The Jquery code I want to put below:

$("#produtos").on('click', 'a.remove-item', function(e) {
        e.preventDefault(); 
        var pcode = $(this).attr("codigo"); 
        $(this).parent().fadeOut(); 
        $.getJSON( "processar.php", {"remover":pcod} , function(data){ 
            $("#info").html(data.items); 
            $(".box").trigger( "click" ); 
        });
});

1 answer

5


In the bootstrap documentation, to hide the modal manually just call the function modal passing as argument the value hide, for example: $('.minha-modal').modal('hide');.

To perform something after n seconds, use the function setTimeout.

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

    // Requisição.

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

    setTimeout(function() {
      $('.modal').modal('hide');
    }, 3000); // 3000 = 3 segundos
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<button>Remover Produto</button>

<div class='modal fade' role='dialog'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-body'>Produto Removido!</div>
    </div>
  </div>
</div>

  • 1

    Perfect Renan. Thank you so much!

Browser other questions tagged

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