1

Tenho um pop-up e gostaria que ele abrisse depois que o usuário já está um tempo em determinado link.

Meu JS está assim:

 if($('.popup-banner').length > 0) {
    (window.location.href === '/')
    $('.popup-banner .fechar, .popup-banner .link-fechar, .popup-overlay').click(function() {
        $('.popup-overlay, .popup-banner').fadeOut(400);
    });
}

Onde coloco o delay?

1
  • Utilize setTimeout( function() { /* Seu código */ }, delayEmMilissegundos); 27/03/2018 às 16:59

2 Respostas 2

1

Use setTimeout e mostre a popup com .fadeIn(), desta forma:

if($('.popup-banner').length > 0) {
    (window.location.href === '/')

    setTimeout(function(){
       $(".popup-banner").fadeIn();
    }, 3000); // 3000 = 3 segundos

    $('.popup-banner .fechar, .popup-banner .link-fechar, .popup-overlay').click(function() {
        $('.popup-overlay, .popup-banner').fadeOut(400);
    });
}

Exemplo:

if($('.popup-banner').length > 0) {
    (window.location.href === '/')
    
    setTimeout(function(){
       $(".popup-banner").fadeIn();
    }, 3000); // 3000 = 3 segundos
    
    $('.popup-banner .fechar, .popup-banner .link-fechar, .popup-overlay').click(function() {
        $('.popup-overlay, .popup-banner').fadeOut(400);
    });
}
.popup-banner{
   display: none;
   background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Aguarde 3 segundos...
<div class="popup-banner">
   pop up
</div>

0

Mantive apenas o que fará o elemento abrir:

setTimeout( function() {
   $('.popup-overlay, .popup-banner').fadeOut(400);
},3000)

Isso faz com que a função do click deixe de funcionar, já que a ideia é abrir automático.

Se quiser manter o click, mantenha seu código já existente (que trata apenas o click) e adicione este novo, que fará a mesma coisa, porém considerando APENAS o tempo.

Note que o 3000 é o tempo em milissegundos.

0

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 .