Jump to content
Alex Branco

Contagem Regressiva iniciar quando popup for mostrada

Recommended Posts

Boa noite galera,

Sou iniciante e tenho uma dúvida que deve ser simples. Estou desenvolvendo um site em wordpress e utilizando o plugin wbounce para wordpress que é uma exit intent popup que abre quando a pessoa tira o mouse da janela com a intenção de navegar para outro site.

Consegui fazer com que essa popup feche depois de aberta após um tempo definido por mim. E também mostrar um contador regressivo de tempo para a janela fechar.

Porém essa contagem inicia quando o site é aberto e preciso que só se inicie quando a div da popup for mostrada.

Segue o código que estou utilizando:

jQuery(document).ready(function($){
var $banner       = $('#wbounce-modal'); // objeto banner
var $tempo     = 10; // milisegundos
var $intervalo;

// funcao que fechará o banner
function fechar(){
    $("#wbounce-modal").hide();
}
setTimeout(fechar, $tempo*1000);
    
    function contador(){
    $intervalo = window.setInterval(function() {
    var tempoContagem     = $("#contador").html();
    var atualizaContagem     = eval(tempoContagem) - eval(1);
    $("#contador").html(atualizaContagem);
 
    // chegando em zero o contador é parado
    if(atualizaContagem == 0){
      pararContagem();
    }
     }, 1000);
  }
    
    // funcao para limpar o contador 
  function pararContagem(){
     window.clearInterval($intervalo);
  }
 
  // chamada da funcao que fará a contagem
  contador();
})

 

Tentei inserir: if($('#wbounce-modal').css('display') == 'block'){}, mas não deu certo!

 

Podem me ajudar?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By calves_oliveira
      Pessoal, não tenho conhecimento em Thread e em Timer mas consegui criar esses dois métodos porém está com um erro e não consigo resolver, a idéia é o seguinte: um classe manda uma jlabel para o método mostraLabel e ele chama o outro método desizaLabel os dois metodos abaixo vai apresentar a mensagem durante 3 segundos e dois deslizar para sair da tela.
      Sei que tem um erro no loop do metodo deslizaLabel pois ele esta com loop infinito mas não consigo tirar… quero que ao jlabel deslizar até o fim do form ele finalize o Thread.
      e também se alguém tiver alguma sugestão de como otimizar esse processo será bem vindo.
      public void mostraLabel(JLabel lbl) { ActionListener action = new ActionListener() { @Override public void actionPerformed(ActionEvent e) { tempo.stop(); deslizaLabel(lbl); } }; tempo = new Timer(3000, action); tempo.start(); } private void deslizaLabel(JLabel lbl){ new Thread(){ @Override public void run(){ int x = 0; int y = lbl.getLocation().y; while(true){ x++; if(x > lbl.getWidth()){ this.stop(); } lbl.setLocation(x,y); try { sleep(10); } catch (InterruptedException ex) { } } } }.start();}  
    • By MateusOFCZ
      Olá, eu criei uma página de publicidade, porém não fluiu como eu queria, então coloquei essa página em uma DIV, alguém poderia me informar se irá funcionar caso eu faça um sistema para ocultar essa DIV depois de 10 segundos?
      <!--- Publicidade ------> <div id="publicidadediv"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title><?= $config['hotelName'] ?> - Publicidade</title> <script src="/templates/GalaxyServers/client/js/jquery-latest.js" type="text/javascript"></script> <script src="/templates/GalaxyServers/client/js/jquery-ui.js" type="text/javascript"></script> <script src="/templates/GalaxyServers/client/js/spacehotel2018.js"></script> <script src="/templates/GalaxyServers/client/js/flash_detect_min.js"></script> <script src="/templates/GalaxyServers/client/js/client.js" type="text/javascript"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="icon" type="image/png" href="<?= $config["favicon"];?>"> </head> <body> <body style="background-color:black;"> <center><img src="https://i.imgur.com/kHdzpqq.png" style="width:396px;height:91px;"></center> <center><?php $imagens = array(); $imagens[] = '<a href="https://hobbyhotel.club/hotel?room=255" target="_blank"><img src="https://i.imgur.com/O0gSito.png" style="width:330px;height:250px;"></a>'; $imagens[] = '<a href="https://hobbyhotel.club/hotel?room=255" target="_blank"><img src="https://i.imgur.com/O0gSito.png" style="width:330px;height:250px;"></a>'; $chave = array_rand($imagens); $imagem = $imagens[$chave]; echo $imagem; ?></center> <center><img src="https://i.imgur.com/9FH4A5O.png" style="width:396px;height:91px;"></center> </body> </div> <!--- Publicidade ------> Gostaria de sabem também como faço para ocultar tudo isso após X segundos...
    • By Joachim Augusto
      ola tudo bem ? preciso criar no meu site algo assim:>  http://leocdmoral.com.br/cd/1290/
      quando clica em download, abre outra página, só que eu queria dentro do proprio post do wordpress uma contagem regressiva, e direcionar a pessoa para um link download, obrigado
    • By Sulivan1999
      Sou novo em programação, e estou com alguns códigos para por uma contagem regressiva cima de um banner. Já consegui fazer a contagem regressiva de 10 segundos, não estou conseguindo por ela acima do banner, para que quem acessar o site veja. Segue abaixo os códigos que estou usando, se alguém poder me ajudar agradeço muito!
       
      <body> <div style='position: fixed; z-index: 60000; font-family:verdana;font-size:10px;background-color: #FFFFFF;'><p>Fecha em:<p></span></div> <div style="font-family:verdana;font-size:10px; z-index: 70000;" onLoad="relogio()"> <span id="spanRelogio"> </span></div> <div class='footer' id='banner_popup' style='position:fixed; left: 1px; bottom: 0px; height: 100%; width: 100%; z-index:50000;'> <iframe border='0' class='overlay2' frameborder='0' height='100%' marginheight='0' marginwidth='0' scrolling='No' src='http://radiojaboticabal.com.br/publicidade-pop-up/index1.html' style='max-width: 100%; width: 100%;'/> </div> </body> <script language='JavaScript'> function fecha_banner() { var banner_obj = document.getElementById(&#39;banner_popup&#39;); banner_obj.style.display = &#39;none&#39;; } setTimeout(&#39;fecha_banner()&#39;, 17000); </script> <script> /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { p{ font-size: 23px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { p{ font-size: 19px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { p{ font-size: 15px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { p{ font-size: 11px; } } </script> <script> var min, seg; min = 0; seg = 10 function relogio(){ if((min > 0) || (seg > 0)){ if(seg == 0){ seg = 59; min = min - 1 } else{ seg = seg - 1; } if(min.toString().length == 1){ min = "0" + min; } if(seg.toString().length == 1){ seg = "0" + seg; } document.getElementById('spanRelogio').innerHTML = min + ":" + seg; setTimeout('relogio()', 1000); } else{ document.getElementById('spanRelogio').innerHTML = "Aguarde..."; } } </script>  
      Quero que fique mais ou menos desse jeito aqui. Obs: Do jeito que esta no canto superior direito do banner do print.

       
    • By Jazara
      Olá pessoal, arrumei este código aqui abaixo que tem um contador regressivo, porém queria dinamizar com php, porém não sei como pegar os números diferentes usando o mesmo sistema de conta sem ter que ter um para cada contador
       
      exemplo quero ler do banco o valor e digamos que eu tenha 3 valores diferentes
      expira em 30 min
      expira em 1 hora
      expira em 15 minutos
       
      não consegui pensar em como fazer para ter um temporizador para cada situação de forma dinâmica lendo o mesmo código e sem usar iframe. Segue o código.
       
      #####
      <script>
      //CONTAGEM REGRESSIVA
      function contador(segundos,pagina){
              contador1 = setTimeout('redireciona(\''+pagina+'\')', segundos*1000);
              atualiza(segundos);
          }
          function atualiza(segundos){
              if(segundos>0){
                  //$("#tempo").html(segundos);
                  transforma_tempo(segundos);
                  segundos = segundos-1;
                  contador2 = setTimeout('atualiza(\''+segundos+'\')', 1000);
              }
          }
      //CONVERT TEMPO
      function transforma_tempo(s){
                    
          function duas_casas(numero){
              if (numero <= 9){
                  numero = "0"+numero;
              }
              return numero;
          }
          hora = duas_casas(Math.round(s/3600));
          minuto = duas_casas(Math.floor((s%3600)/60));
          segundo = duas_casas((s%3600)%60);
                    
          //formatado = hora+":"+minuto+":"+segundo;
      formatado = minuto+":"+segundo;
          //return formatado;
          $("#tempo").html(formatado);
       }
      //START
      contador(1800,'');
      </script>
      <div class="tempo-restante">
      <span id="tempo"></span> min.
      <div class='CxInfo'>
      <i id="abre-info" class="fa fa-info-circle" aria-hidden="true"></i>
      <div class="info-time">Tempo restante para liberar a data do agendamento, caso a compra n&atilde;o seja finalizada!</div>
      </div>
      </div>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.