Ir para conteúdo

POWERED BY:

Arquivado

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

Clayder

Abrir e ocultar DIV

Por , em Javascript

Recommended Posts

Clayder    0

Clayder
Postado

Ola pessoal , tenho pouco conhecimento em javascript e gostaria q vcs me dessem uma ajuda nisso aqui :

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
<head>
<title>Exibindo/oculta uma DIV</title>
<script type="text/javascript">
function exibe(id) {
if(document.getElementById(id).style.display=="none") {
	document.getElementById(id).style.display = "inline";
}
}
</script>
</head>
<body>
<a href="#" onclick="javascript: exibe('conteudo');">Exibe</a><br />
<br />
<div id="conteudo" style="display: none;position:fixed;width: 200px;height:100px;background:#000;font-color:#fff;">
Seu conteúdo aqui...
</div>

<div id="conteudo" style="border: 1px solid #00ff00;width:700px;height:500px;">
kjskajskjaksakjskajskjaskjaksjkajskajs
</div>
</body>
</html>

 

quando eu clico em exibir a div exibe numa boa , mas o problema é para ocultar ela , eu só estou conseguindo ocultar através de link e nao é isso que eu quero . Sera q tem como quando o usuario clicar em algum lugar fora dessa div ela fechar sozinha ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Arash    0

Arash
Postado

É possível, e eu mesmo fiz, espero que voce entenda o que eu fiz ^^

var div, calma;
div = false;
calma = false;
function exibe(id) {
if(document.getElementById(id).style.display=="none") {
	calma = true;
	document.getElementById(id).style.display = "inline";
}
}
window.onload = function () {
/* Quando clicar na div "conteudo" ele vai lançar a função e deixar a div como true. */
document.getElementById("conteudo").onclick = function () {
	div = true;	
};
/* Quando clicar independente do lugar ele vai verificar se calma esta como false, se verdadeiro então ele segue verificando se o clique foi na div ou em outra parte da página, se div for verdadeiro ele vai colocar como false e terminar o código, se calma for verdadeiro, ele verifica se esta como inline, do contrario continua false até ficar inline, e se div for false, ele desaparece com a div */
document.body.onclick = function () {
	if (!calma) {
		if (div === true) {
			div = false;
			return false;
		} else {
			document.getElementById("conteudo").style.display = "none";
		}
	} else if (document.getElementById("conteudo").style.display === "inline") {
		calma = false;	
	}
};
};

Compartilhar este post

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

Informação importante

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

  Aceito