Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Creedence

Fechar uma DIV automaticamente

Por , em Desenvolvimento frontend

Recommended Posts

Creedence    1

Creedence
Postado

Boa tarde !

 

Eu adaptei um código que encontrei para abertura de uma DIV como popup (codigo abaixo)

Está funcionando corretamente e se eu clicar no "X", fecha a DIV sem problemas.

 

Eu gostaria de saber como fechá-la automaticamente após 30 segundos por exemplo.

 

Obrigado,

 

Marcos

********************

<style>
#pop{
display:block;
position:absolute;
top:25%;
left:auto%;
width:250px;
height:200px;
border:1px solid #d0d0d0}
</style>
<body>
<div id="pop">
<a href="#" onclick="document.getElementById('pop').style.display='none';">[x]</a>
<br />
Aqui entra o conteudo da DIV (imagem , texto, etc ...)
</div>
</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Esse popup abre automaticamente quando a página é carregada?

 

Se sim, dá pra usar um código jQuery, exemplo:

$(document).ready(function(){


setTimeout(function(){ 
$('#pop').hide();
}, 30000);


});

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Essa é a melhor e mais simples solução que você poderia querer.

 

Esse popup abre automaticamente quando a página é carregada?

 

Se sim, dá pra usar um código jQuery, exemplo:

$(document).ready(function(){


setTimeout(function(){ 
$('#pop').hide();
}, 30000);


});

 

 

Mas, se de alguma maneira, tu tiver pavor de JQ ou não souber nem o que é, pode embromar no CSS com animation.

HTML:

<div class="caixa">Lorem ipsum set  dolor sit amet</div>

CSS:

.caixa{
    background: #C111C2;
    color: #FFF;
    padding: 10px;
    -webkit-animation: remover 1s forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 30s;
    animation: remover 1s forwards;
    animation-iteration-count: 1;
    animation-delay: 30s;
    
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* Animation 'remover' div */
@-webkit-keyframes remover{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes remover{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

Se quiser ver isso funcionando, tem aqui a DEMO. (Só troque os 30s por um tempo menor pra não ficar esperando até a animação funcionar hahahahaha)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito