Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Ocultar a div ao clicar fora

13-08-2007 22:04

Abaixo segue um código que quando for clicado fora da área da div, a mesma é escondida.

<script type="text/javascript"> document.onclick=evento; function evento(e){ var target = (e && e.target) || (event && event.srcElement); var obj = document.getElementById('minhadiv'); var obj2 = document.getElementById('clica'); checkParent(target)?obj.style.display='none':null; target==obj2?obj.style.display='block':null; } function checkParent(t){ while(t.parentNode){ if(t==document.getElementById('minhadiv')){ return false } t=t.parentNode } return true } </script>


<div id="clica">mostrar div</div>   <div id="minhadiv" style="display:none; border:1px solid #cccccc; width:100px; height:100px;">meu conteúdo aqui</div>

1
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 1

Ocultar a div ao clicar fora

22-02-2009 00:06

muito util.... cara poderia comentar seu código para eu entender melhor
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Ocultar a div ao clicar fora

22-02-2009 09:04

Vou dar uma explicação mais funcional

// ao clicar no documento chama a função evento document.onclick=evento;   // função evento, o e representa o evento que chamou ela, ou seja, o click function evento(e){   // definindo target // (e && e.target) para FF // (event && event.srcElement) para IE var target = (e && e.target) || (event && event.srcElement);   // obj que passa a ser a div que será mostrada var obj = document.getElementById('minhadiv');   // objeto que recebe o click var obj2 = document.getElementById('clica');   // aqui é feita uma chamada para a função checkParent // quando chamada faz a div ficar com display none, caso contrário não faz nada checkParent(target)?obj.style.display='none':null;   // se target "com foco no navegador", for igual ao click no obj2 // faz ser mostrada target==obj2?obj.style.display='block':null; }   // essa função "com base no navegador" // faz uma verificação e faz uma definição da div que será oculta no documento function checkParent(t){ while(t.parentNode){ if(t==document.getElementById('minhadiv')){ return false } t=t.parentNode } return true }

1
A melhor hospedagem para o seu site HostGator!
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Ocultar a div ao clicar fora

01-02-2016 17:49

Vou postar uma verão mais atualizada desse script.

Se você clicar na div com a classe pai, a div não fecha.
Agora se você clicar na div com a classe filha ou em qualquer espaço em branco na página a div filha fecha.

<script src="jquery.js"></script> <script> $(document).ready(function() { $("body").click(function(e){ if(e.target.className=="pai") { return false; } else { $(".filha").hide(); } }); }); </script> <div class="pai">clique em mim que não fecho a div</div> <div class="filha">eu sou a div</div>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado