5

Eu estou a tentar abrir um modal, esperar 3 segundos e fechá-lo dentro do $( document ).ready().

Quando uso $('#myModal').modal('show'); o modal aparece mas quando faço $('#myModal').modal('show').delay(3000).modal('hide'); ele nem sequer aparece.

2 Respostas 2

9

Não creio que seja possível fazer chain dessa maneira. Não estou 100% certo disso.

De qualquer maneira pode fazer assim:

$('#myModal1').modal('show');
setTimeout(function () {
    $('#myModal1').modal('hide')
}, 2000);

Exemplo

5

O teu problema é que estás a fazer uso do método .delay() de forma incorreta. O mesmo só afeta a queue de animações e não outros métodos, funções, eventos, etc. que não estejam na queue.

Solução

Bootstrap > 3.0.0

Podes executar determinado código quando uma modal é apresentada, fazendo uso do evento shown.bs.modal:

$('#myModal1').on('shown.bs.modal', function() {

    var $me = $(this);

    $me.delay(3000).hide(0, function() {
        $me.modal('hide');
    });
});

Assim, quando a modal for aberta, o código anexado a esse evento será executado. No exemplo em cima, existe uma pausa de 3 segundos e depois a própria modal é fechada.

Como o método .delay() só afeta a queue de animações, o parâmetro 0 no método .hide() é passado para que o mesmo passe a constar da queue de animações e assim esperar pelo .delay() indicado, sem o parâmetro ele não faz parte da queue pelo que é executado de imediato.

Exemplo

Exemplo em baixo também no JSFiddle.

$(function() {

  $('#myModal1').on('shown.bs.modal', function() {

    var $me = $(this);

    $me.delay(3000).hide(0, function() {
      $me.modal('hide');
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
 Abrir, deve fechar ao fim de 3 segundos
</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .