Exibir div onclick e ocultar automaticamente

[danicarla 3]

Oi pessoas...

Estou tentando fazer que uma div apareça quando o usuário clicar em um botão, até ai consegui fazer...
Mas eu queria que essa div se ocultasse automaticamente depois de uns 10 segundos...

<script>
function Mudarestado(el) {
    var display = document.getElementById(el).style.display;
    if(display == "none"){
        document.getElementById(el).style.display = 'block';
	    } else {
    	document.getElementById(el).style.display = 'none';
}
}
<script>

<div id="minhaDiv" style="display:none;width:100%;height:500px;background-color:#CCC">Conteudo da div</div>
<button type="button" onclick="Mudarestado('minhaDiv')">Mostrar / Esconder</button>

Eu tentei colocar dentro do if uma outra função que oculta a div.. mas não deu certo:

function fecha_banner(){
 var banner_obj = document.getElementById('minhaDiv');
 banner_obj.style.display = 'none';
}
setTimeout('fecha_banner()', 10000);

[angelorubin 142]

Olá,

 

Veja se ajuda - http://nodebr.com/funcoes-temporizadoras-embutidas-no-javascript-settimeout-e-setinterval/

[Ted k' 126]

Faz direto: assim:

setTimeout(function(){
 var banner_obj = document.getElementById('minhaDiv');
 banner_obj.style.display = 'none';
}, 1000);

Olha funcionando:

http://jsfiddle.net/ted_k/0fz27nhk/

[danicarla 3]

Ted o código que voce passou não funcionou..
Quando eu clico no botão não aparece a div.

[jclima27 1]

Oi Dani, cola este codigo entre as tags body, na pagina você clica em calcular

 

<form>

<input type="text" id="num1" size="3">

<input type="text" id="num2" size="3">

<input type="text" id="resultado" size="3">

<input type="button" onclick="somar(); sumir()" value="somar"></input>

<p id="mensagem"></p>

<div id="teste">

<h1>Isso é um teste</h1>

</div>

</form>

<script>

function somar(){

numero1 = document.getElementById("num1").value;

numero2 = document.getElementById("num2").value;

var soma = parseInt(numero1) + parseInt(numero2);

document.getElementById("resultado").value = soma;

}

function sumir() {

setInterval(function(){

document.getElementById("resultado").style.display = "none";

}, 3000);

setInterval(function(){

document.getElementById("teste").style.display = "none";

}, 3000);

}

</script>

[danicarla 3]

jclima27 seu código tbm não dá certo..

Ele até some a div.. mas depois quando eu clico no botão para aparecer a div novamente, ela não aparece mais.

Achei que fosse algo mais simples isso :(

Mas vou tentar montar uma em cima desses códigos todos que me passaram..

[hebert jr vianna 0]

e ai blza...

 

tenta assim

 

<style type="text/css">

 

#click

{

width: 100px;

height: 30px;

background: #dedede;

color: #f60;

border-radius: 5px;

text-align: center;

line-height: 30px;

text-transform: uppercase;

}

 

#resposta

{

display: none;

}

 

 

</style>

 

<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>

 

<script type="text/javascript">

 

$(document).ready(function()

{

$('#click').on('click', function()

{

controle();

setTimeout(controle,1000);

})

 

function controle()

{

$('#resposta').slideToggle();

}

 

});

 

</script>

 

 

<div id="resposta">Div resultado....</div>

 

<div id="click">Testar</div>

 

 

De uma pesquisa sobre a função slideToggle para entendela melhor caso não a conheça..é bem simples....

... ;)

[danicarla 3]

Wohoooouuu agora deu certo :)

Vou tentar fazer sem jquery agora!

[hebert jr vianna 0]

Caso não use a função $(document).ready... você precisa inserir o script depois do html, caso contrario pode ser que não seja executado corretamente....o teu script....

[Sergio Tomas 16]

Bom dia Danicarla,

 

Tente esta solução:

<script>
function Mudarestado(el) {
    var display = document.getElementById(el).style.display;
    if(display == "none"){
        document.getElementById(el).style.display = 'block';
        //após exibir a caixa eu crio o timeout para fechar
        window.setTimeout(function(){
               document.getElementById(el).style.display = 'none';
        }, 10000);
	    } else {
    	document.getElementById(el).style.display = 'none';
    }
}
<script>

<div id="minhaDiv" style="display:none;width:100%;height:500px;background-color:#CCC">Conteudo da div</div>
<button type="button" onclick="Mudarestado('minhaDiv')">Mostrar / Esconder</button>

[danicarla 3]

Caso não use a função $(document).ready... você precisa inserir o script depois do html

Não entendi... vai estar dentro do <head> né?

 

Sergio deu certo tbm.. obrigada!

[jclima27 1]

$(document).ready é igual a a função onload do Javascript, ele só executa o script depois que todo o documento for carregado.

 

<head>

<script>

<--codigo java script--> se voce colocar o codigo jquery sem usar $(document).ready, ele vai carregar o script sem saber que existe o codigo HTML, então não vai funcionar

</script>

<head>

<body>

<!-- codigo html -->

<body>

-----------------------

 

 

<body>

codigo html

 

<script>

<-- Ai neste caso o script deve ser colocado aki

</script>

<body>

[hebert jr vianna 0]

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

<script type="text/javascript">

</script>

no teu caso o script deve ficar nesse local.....depois de tudo...

veja o por que na resposta do jclima27

abraços...

[danicarla 3]

Obrigada gente :)