How to hide a modal window after a while?

Question

How to hide a modal window after a while?

Navigation

#1 by (4 votes)

4

Colleagues.

I do not know if I was clear in my doubt, but I would like the Bootstrap mode to disappear automatically after deletion confirmation. For example: the user will delete a product, the message "Product successfully deleted" appears. The modal was about 3 seconds active and then disappeared. The JQuery code I want to put below follows:

$("#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" ); 
        });
});

jquery bootstrap

asked by anonymous 19.06.2016 / 22:42

1 answer

process in python How to animate sprite sheets?

score 4 · Accepted Answer

In the Bootstrap documentation , to hide the modal manually, simply call the function modal by passing the value hide , for example: $('.minha-modal').modal('hide'); .

To run something after n seconds, use the 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><scriptsrc="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>