2

Estou com um POPUP em meu site que aparece sempre que a pessoa atualiza ou entra nele.

Quero criar uma função javascript (pois a página é em HTML e não tem como usar PHP) para que apareça o POPUP apenas uma vez por usuário com um tempo de intervalo, tipo 1 dia para ele aparecer de novo.

Vou deixar abaixo o meu código:

<html>
<head>
<style>

#popup{     
margin-top: -45px;
    position: absolute;
    width: 300px;
    height: 250px;
    left: 400px;
    top: 288px;
    z-index: 99999;
    margin: -175px auto 0px 15px;
    border: 6px solid rgba(0, 165, 71, 0.13);
    padding: 10px;
    padding-left: 30px;
    padding-top: 30px;
    background: rgba(255, 255, 255, 0.96);}

.fechar {position: absolute; top: -10px; right: -10px;}
</style>
</head>

<body>

<script src='http://ajax.googleap...2/jquery.min.js' type='text/javascript'/></script> 

<div id='popup'>
    <div class='fechar'>
        <img src='http://jconlinedigit...e_fechar.png'/> 
    </div>
</div> 

<script type='text/javascript'>
    $(document).ready(function(){
       $('.fechar').hover(function(event){
             event.preventDefault();
              $("#popup").hide();
        });
    });  
    setTimeout(function() {
       $("#popup").css("display","block");
    }, 5000);    
</script> 

</body>
</html>
1
  • Utilize o jquery-cookie, basta criar um cookie, verificar se o mesmo existe, exibir a modal, se o usuario clicar para fechar, setar o cookie como false.
    – Bruno Wego
    Commented 16/09/2015 às 11:26

2 Respostas 2

1

Fiz um exemplo muito simples de como trabalhar com cookies salvando se o usuário fechar a modal e prevenindo que não abra novamente:

if ($.cookie('modal') != 'false') {
  $.cookie('modal', 'true');
}

if ($.cookie('modal') == 'true') {
  alert('modal open');
}

$('.close-modal').on('click', function() {
  $.cookie('modal', 'false');
});

Exemplo completo aqui.

2
  • Por favor... você pode incrementar isso no meu código e faze-lo funcionar? Commented 18/09/2015 às 15:42
  • 5
    Olá @GMNwebGMNweb, se você quiser, eu posso incrementar no seu código, e também receber o seu salário ;) Commented 19/07/2016 às 13:34
0

Exemplo de modal funcionando com o cookie expirando em 24h usando JqueryCookies.

 $(document).ready(function () {
            // cookie para exibir uma vez por dia
            if($.cookie("modal") == null){
            setTimeout(function () {
                $('#modal').css('opacity', 1);
                var date = new Date();
                date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
                $.cookie("modal", "2", {expires: date});
            }, 3000);
    }});

    function fecharModal() { $(".modal").css("display", "none"); }
  .modal { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0, 0, 0, 0.8); z-index:99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events:auto; }
        .modal>div { width:450px; position:relative; margin:10% auto; padding:15px 15px; background:#fff; }
        .fechar { position:absolute; width:32px; right:-15px; top:-20px; text-align:center; line-height:30px; margin-top:5px; background:#ff4545; border-radius:50%; font-size:16px; color:#fff; cursor:pointer; }
   <div class="modal" id="modal">
        <div>
            <a onclick="fecharModal()" class="fechar"><img src="http://www.agripoint.com.br/ico-fechar.svg" alt="Fechar"></a>
            <a href="https://www.google.com.br">
                <img src="https://www.agripoint.com.br/images/pesquisa-de-adequacao.jpg" alt="">
            </a>
        </div>
    </div>

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 .