Então, tenho uma div que aparece toda vez que submeto um form, queria saber como eu faço pra essa div sumir após certo tempo.
-
1fiz um exemplo de div sumindo, como você não colocou codigo, fiz um mais mais ou menos como seria... desaparece depois de 10 segundos... adapte para como for melhor para ti– LocalHost7/01/2017 às 23:21
-
1Isso. Fiz outro exemplo. Se quer algo aplicado ao teu problema, posta o código.– mau humor7/01/2017 às 23:22
2 Respostas
Um exemplo simples com JavaScript puro, já que você não adicionou a tag JQuery.
Some a pos 3000 milesegundos. Podera alterar esse valor se desejar.
setTimeout(function(){
var a = document.getElementById("div-teste");
a.style="display:none"
}, 3000);
<div id="div-teste">
Div de teste
</div>
Fiz uma funcao aqui, você pode usar dessa forma, ou ate mesmo no php dessa forma:
<?php echo "<script>mensagem('alerta','Isso é um alerta');</script>";?>
Ou no próprio js ou jquery:
function mensagem(tipo,msg){
$("#mensagem").addClass(tipo);
$("#mensagem").html(msg);
setTimeout(function(){$("#mensagem").removeClass(tipo);
$("#mensagem").html("");},10000);
}
$("#btt").click(function(){
//pode usar 'confirmacao' no lugar do alerta
mensagem("alerta","Isso é um alerta");
});
.alerta {
border: solid 1px rgba(249,18,22,1.00);
border-radius: 4px;
background-color: rgba(251,12,16,0.76);
color: #fff;
padding: 10px 0;
width: 100%;
margin: 0 auto;
text-align: center;
transition: 0.5s ease-out;
}
.confirmacao {
border: solid 1px rgba(0,138,3,1.00);
border-radius: 4px;
background-color: rgba(40,201,8,0.76);
color: #fff;
padding: 10px 0;
width: 100%;
margin: 0 auto;
text-align: center;
transition: 0.5s ease-out;
}
.aviso {
border: solid 1px rgba(249,107,11,1.00);
border-radius: 4px;
background-color: rgba(249,107,11,0.6);
color: #fff;
padding: 10px 0;
width: 100%;
margin: 0 auto;
text-align: center;
transition: 0.5s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mensagem"></div>
<input type="button" id="btt" value="Clique para aparecer a mensagem">
E lembre-se de sempre colocar essa div onde quer que apareça a mensagem e modifique o css de acordo com o seu gosto. Espero ter ajudado!!!