Jump to content


Photo

Ao Clicar No Link, Mostra A Div, Ao Clicar Em Outro Lugar, Oculta A Di

Javascript JS Div Ocultar exibir

  • Faça o login para participar
10 replies to this topic

#1 Titicolas

Titicolas

    Normal

  • Usuários
  • 78 posts
  • Sexo:Não informado

Posted 15/02/2009, 16:06

Bom o título ja é auto-explicativo...

Se não entenderem, um ótimo exemplo é quando você clica na Busca ali emcima no fórum.
Ele abre uma DIV, e quando vc clica em qualquer outro lugar fora dela, ela fecha.

Alguém sabe como fazer isso?
 

Bom o título ja é auto-explicativo...

Se não entenderem, um ótimo exemplo é quando você clica na Busca ali emcima no fórum.
Ele abre uma DIV, e quando vc clica em qualquer outro lugar fora dela, ela fecha.

Alguém sabe como fazer isso?


aloc credibilidade-- pra esse forum hein =/

 



#2 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 16/02/2009, 11:02

Só procurar em javascript por ocultar/oculta.
http://forum.wmonlin...?showtopic=2658
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#3 BGGMB

BGGMB

    12 Horas

  • Usuários
  • 156 posts
  • Sexo:Masculino
  • Localidade:Vinhedo SP
  • Interesses:CSS, XHTML, SEO, Photoshop, Illustrator, After Effects, InDesign, Fireworks, Dreamweaver...

Posted 17/02/2009, 15:30

O código abaixo gera uma div com função onmouseout que faz a div sumir ao tirar o mouse dela.
O link em HTML possui a função onclick que faz mostrar a div.

<div id="nomeDaDiv" onmouseout="java script:someDiv();">

</div>

<a href="java script:void(0)" onclick="java script:mostraDiv();">AO CLICAR AQUI VAI MOSTRAR A DIV</a>


O código CSS abaixo vai deixar sua div escondida por padrão
<style type="text/css">
#nomeDaDiv {display:none;}
</style>

Abaixo estão as funções javascript que vão mostrar e ocultar a div (observe o nome das funções para entender melhor)
<script language="javascript">
function mostraDiv(){
			document.getElementById("nomeDaDiv").style.display = "block";
				}
function someDiv(){
			document.getElementById("nomeDaDiv").style.display = "none";
				}
</script>

As funções acima só alternam de display:none; e display:block;
none para ocultar e block para exibir.

Qualquer dúvida poste novamente.

Edição feita por: BGGMB, 17/02/2009, 15:31.

front-end engineer <tags: css/xhtml/javascript/seo/usability/semantic>
www.brunobincoletto.com - twitter @brunobincoletto

#4 Titicolas

Titicolas

    Normal

  • Usuários
  • 78 posts
  • Sexo:Não informado

Posted 17/02/2009, 17:16

=(

num eh no onmouseout galera... c fosse isso ja tinha feito -.-

eu quero que a DIV despareça quando ---------->CLICAR<--------- fora da DIV

#5 fiote

fiote

    12 Horas

  • Usuários
  • 191 posts
  • Sexo:Masculino
  • Localidade:Vila Velha - ES
  • Interesses:PHP

Posted 18/02/2009, 08:12

<script language="javascript">
function escondeDiv() {
	document.getElementById('div').style.display = 'none';
}
</script>

<div id='divOculta' style='width:99%; height:99%; z-index:1; position:absolute' onClick='escondeDiv()'>
</div>

<div id='suaDiv' style='width:300px; height:300px; z-index:2; position:relative; border:1px solid red'>
Oi rs
</div>

A divOculta é o elemento que vai receber o click que chamará a função. Como setamos a posição como absolute, ela vai começar no top-left da página e não atrapalhará nenhum outro objeto. Em relação à suaDiv, você deve manter a posição como relative e um zIndex superior ao da divOculta, para ter certeza que suaDiv estará 'por cima' da divOculta.

;)

Edição feita por: fiote, 18/02/2009, 08:19.

[ FFTOnline.Net ]
Developed by Fiote, Powered by Mootools.

#6 BGGMB

BGGMB

    12 Horas

  • Usuários
  • 156 posts
  • Sexo:Masculino
  • Localidade:Vinhedo SP
  • Interesses:CSS, XHTML, SEO, Photoshop, Illustrator, After Effects, InDesign, Fireworks, Dreamweaver...

Posted 18/02/2009, 16:29

=(

num eh no onmouseout galera... c fosse isso ja tinha feito -.-

eu quero que a DIV despareça quando ---------->CLICAR<--------- fora da DIV


Nesse caso complica um pouco.

Cria uma div para englobar o site todo, deixe ela 100% de largura e altura.

nela você coloca onclick="java script:someDiv();"

Fora dessa div você coloca a div que vai sumir e aparecer.

Ou seja, quando você clicar em um link para mostrar a div vai usar a função onclick="java script:mostraDiv();"

Na div que engloba todo o site a função onclick="java script:someDiv();", para que quando o usuário clique fora da div ela desapareça.

Acho que pode funcionar colocando onclick="java script:someDiv();" na <body>, porém não tenho certeza, pode acontecer de sumir a div quando clicar em qualquer ponto do site, faça testes amigo ^^
front-end engineer <tags: css/xhtml/javascript/seo/usability/semantic>
www.brunobincoletto.com - twitter @brunobincoletto

#7 fiote

fiote

    12 Horas

  • Usuários
  • 191 posts
  • Sexo:Masculino
  • Localidade:Vila Velha - ES
  • Interesses:PHP

Posted 19/02/2009, 06:50

lol BGG, você postou praticamente a mesma coisa que eu já havia falado.

E não, colocar na <body> não funciona (eu testei antes de passar meu código ^^), porque ele 'sobrepoe' a div atual dele e mesmo clicando nela mesma vai fazer com que ela se feche.
[ FFTOnline.Net ]
Developed by Fiote, Powered by Mootools.

#8 BGGMB

BGGMB

    12 Horas

  • Usuários
  • 156 posts
  • Sexo:Masculino
  • Localidade:Vinhedo SP
  • Interesses:CSS, XHTML, SEO, Photoshop, Illustrator, After Effects, InDesign, Fireworks, Dreamweaver...

Posted 20/02/2009, 20:28

lol BGG, você postou praticamente a mesma coisa que eu já havia falado.

E não, colocar na <body> não funciona (eu testei antes de passar meu código ^^), porque ele 'sobrepoe' a div atual dele e mesmo clicando nela mesma vai fazer com que ela se feche.



LOL, realmente disse com outras palavras mais praticamente a mesma coisa, nem prestei atenção mals hahahaha.
Sobre o body eu imaginei que não daria certo, ao não ser que colocasse a div fora do body que seria algo bem estúpido lol.
front-end engineer <tags: css/xhtml/javascript/seo/usability/semantic>
www.brunobincoletto.com - twitter @brunobincoletto

#9 Titicolas

Titicolas

    Normal

  • Usuários
  • 78 posts
  • Sexo:Não informado

Posted 21/02/2009, 23:58

&lt;script language="javascript">
function escondeDiv() {
	document.getElementById('div').style.display = 'none';
}
</script>

<div id='divOculta' style='width:99%; height:99%; z-index:1; position:absolute' onClick='escondeDiv()'>
</div>

<div id='suaDiv' style='width:300px; height:300px; z-index:2; position:relative; border:1px solid red'>
Oi rs
</div>

A divOculta é o elemento que vai receber o click que chamará a função. Como setamos a posição como absolute, ela vai começar no top-left da página e não atrapalhará nenhum outro objeto. Em relação à suaDiv, você deve manter a posição como relative e um zIndex superior ao da divOculta, para ter certeza que suaDiv estará 'por cima' da divOculta.

;)

Po finalmente alguém me entendeu ehehuehueuhe
vlw ae cara =) muito boa a ideia

&lt;script language="javascript">
function escondeDiv() {
	document.getElementById('div').style.display = 'none';
}
</script>

<div id='divOculta' style='width:99%; height:99%; z-index:1; position:absolute' onClick='escondeDiv()'>
</div>

<div id='suaDiv' style='width:300px; height:300px; z-index:2; position:relative; border:1px solid red'>
Oi rs
</div>

A divOculta é o elemento que vai receber o click que chamará a função. Como setamos a posição como absolute, ela vai começar no top-left da página e não atrapalhará nenhum outro objeto. Em relação à suaDiv, você deve manter a posição como relative e um zIndex superior ao da divOculta, para ter certeza que suaDiv estará 'por cima' da divOculta.

;)

Po finalmente alguém me entendeu ehehuehueuhe
vlw ae cara =) muito boa a ideia


Então galeres... essa gambiarra ai funciona até mas mesmo assim num é ogual aqui no fórum.
Pq com essa gambiarra ai quando eu crio a div invisivel, acaba deixando o site inteiro impossivel de ser clicado antes de clicar nessa div para fazer ela desaparecer.

Aqui no forum, você pode clicar em qualquer link que ele vai lá, oculta a div e ainda por cima vc pode entrar no link normalmente.
Será que ninguém tem idéia de como isso é feito internamente ai no invision board?

#10 g-prime

g-prime

    Novato no fórum

  • Usuários
  • 3 posts
  • Sexo:Masculino
  • Localidade:Guarulhos SP
  • Interesses:html, javascript, php, ajax, jquery

    novas tecnologias..., tudo hehehe

Posted 09/11/2010, 09:32

Opa galera, blz?

desenvolvi um esquema meio "nas coxa", mais funciona muito bem (e ja estou usando xD)
é meio que um ligthbox (daqueles que vc clica do lado de fora da imagem pra fechar)






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
//abre a div com o conteudo e a div de fora
function abre(){
document.getElementById('div1').style.display = "block";
document.getElementById('div2').style.display = "block";
}
//fecha a div com o conteudo e a div de fora
function fecha(){
document.getElementById('div1').style.display = "none";
document.getElementById('div2').style.display = "none";
}
</script>
<style>
</style>
</head>

<body>
<div style="width:100%; height:100%; left:0px; top:0px; position:fixed; z-index:100; display:none;" id="div1" onclick="fecha();"></div>

<a href="#" onclick="abre();" id="bot">abrir</a><br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />
teste de linha <br /><br />


<div style="width:300px; height:200px; margin:auto; position:absolute; top:20%; z-index:200; border:2px solid #000; background-attachment:fixed; display:none; text-align:center; padding-top:30px;" id="div2">
<a href="#" onclick="fecha();" id="bot">fechar</a>
</div>
</body>
</html>


espero ter ajudado xD
anexei o arquivo que usei pra fazer, so baixar e pronto hehehehe

abraços /o/

Attached Files



#11 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 11724 posts

Posted 20/09/2017, 13:42

Viagra In Melbourne buy cialis Abc Online Pharmacy Comprare Cialis Con Contrassegno Comprar Viagra En Zaragoza buy roaccutane online buy cialis Can You Order Valtrex Online
Viagra Levants Best Price cialis Pharmacyonline Store
Cialis Veritable Baclofene Dose Maximale
Buy Propecia Online Legit <a href=http://cialtobuy.com>cialis</a> Cephalexin For Eye Infection
Priligy 30mg Buy generic cialis Where Can I Buy Levaquin With Free Shipping
Sildenafil 150 Mg Sublingual
buy brand name accutane <a href=http://cialtobuy.com>cialis</a> How Long For Cialis Peaks In The Blood





Veja alguns posts relacionados com: Javascript, JS, Div, Ocultar, exibir

2 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)


    Google (1)
IPB Skin By Virteq