Jump to content
danicarla

Exibir div onclick e ocultar automaticamente

Recommended Posts

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);

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

... ;)

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

$(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>

Share this post


Link to post
Share on other sites
<!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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.