5

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.

2
  • 1
    fiz 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
    – LocalHost
    7/01/2017 às 23:21
  • 1
    Isso. Fiz outro exemplo. Se quer algo aplicado ao teu problema, posta o código.
    – mau humor
    7/01/2017 às 23:22

2 Respostas 2

6

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>

5

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!!!

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 .