Foros del Web » Programando para Internet » Jquery »

Ocultar elemento al hacer clic fuera

Estas en el tema de Ocultar elemento al hacer clic fuera en el foro de Jquery en Foros del Web. Tengo un botón que muestra un elemento... quiero que se oculte al darle a ese mismo botón y también al hacer clic en cualquier sitio ...
  #1 (permalink)  
Antiguo 02/11/2014, 17:18
 
Fecha de Ingreso: agosto-2014
Mensajes: 48
Antigüedad: 5 años, 6 meses
Puntos: 1
Ocultar elemento al hacer clic fuera

Tengo un botón que muestra un elemento... quiero que se oculte al darle a ese mismo botón y también al hacer clic en cualquier sitio que este fuera de él. Como lo haría?
  #2 (permalink)  
Antiguo 02/11/2014, 19:50
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 3 meses
Puntos: 934
Respuesta: Ocultar elemento al hacer clic fuera

Un pequeño ejemplo:

Código HTML:
Ver original
  1. <button>Mostrar/Ocultar</button>
  2. <div></div>

Código CSS:
Ver original
  1. div{
  2.     width: 20rem;
  3.     height: 15rem;
  4.     background: black;
  5.     display: none;
  6. }

Código Javascript:
Ver original
  1. var div = document.querySelector("div"),
  2.     button = document.querySelector("button");
  3.  
  4. window.addEventListener("click", function(event){
  5.     var objetivo = event.target;
  6.     if (objetivo != div && objetivo != button) div.style.display = "none";
  7. }, false);
  8.  
  9. button.addEventListener("click", function(){
  10.     var visible = getComputedStyle(div).display;
  11.     div.style.display = visible == "block" ? "none" : "block";
  12. }, false);

Tenemos una división y un botón. En la hoja de estilos, a la división, le aplico dimensiones, un color de fondo y la oculto. En el código JS, tomo a ambos elementos y los asigno a variables. Luego, cuando demos un clic en alguna parte de la ventana, tomamos el lugar afectado y si este no es la división ni el botón, procedemos a ocultar a la división. Por otra parte, cuando demos clic al botón, tomamos el estilo computado de la división, correspondiente a la propiedad display. Luego, si esta es igual a 'block', le asignamos 'none' a la división, caso contrario, 'block'.

DEMO

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #3 (permalink)  
Antiguo 02/11/2014, 20:07
 
Fecha de Ingreso: agosto-2014
Mensajes: 48
Antigüedad: 5 años, 6 meses
Puntos: 1
Respuesta: Ocultar elemento al hacer clic fuera

Logre hacerlo antes...

pero ahora tengo un nuevo problema

este es el codigo que tengo

jquery

$(document).ready(function(){


$('.btn_mi-cuenta').click(function(e){
e.stopPropagation();
$('#conten_mi-cuenta').fadeIn();
});

$('body').click(function(e) {
if (e.target.id !== "conten_mi-cuenta") {
$('#conten_mi-cuenta').fadeOut();
};
});

});


html

<div id="conten_mi-cuenta">
<div class="in-header">
<span>Iniciar Sección</span>
</div>
<div class="transparent-in"></div>
<form class="form_iniciar-seccion">
<input type="text" class="in-campo" placeholder="Correo">
<input type="password" class="in-campo" placeholder="Clave">
<input type="submit" class="in-enviar" value="Iniciar Sección">
</form>
</div>


css

#conten_mi-cuenta{
display: none;
position: fixed;
z-index: 1000;
width: 251px;
top: 5em;
left: 19em;

}

.in-header{
background: #a8c741;
width: 100%;
padding: 10px 5px;
text-align: center;
border-radius: 2px 2px 0 0;
color: #152232;
}
.in-header span{
background: url('../img/in-arrow.png') center 33px no-repeat;
padding-top: 53px;
}

.transparent-in{
position: absolute;
width: 100%;
height: 145px;
background: rgba(218, 223, 227, 0.92);
padding: 5px;
border-radius: 0 0 2px 2px;
}

.form_iniciar-seccion{
position: absolute;
z-index: 2000;
}
.in-campo{
width: 221px;
height: 30px;
position: relative;
left: 20px;
margin-top: 10px;
padding: 2px;
color: #152232;
border:0px;
border-radius: 2px;
}

.in-enviar{
background: #152232;
border: 0px;
color: white;
margin-left: 20px;
cursor: pointer;
height: 39px;
width: 226px;
margin-top: 10px;
border-radius: 2px;
}



el problema ahora es que cuando le doy a uno de los elementos que esta adentro de "conten_mi-cuenta" se desaparece y no lo quiero asi. Quiero que al cliquear en cualquier elemento hijo no desaparezca. Solo lo haga al cliquear afuera
  #4 (permalink)  
Antiguo 03/11/2014, 00:41
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 3 meses
Puntos: 934
Respuesta: Ocultar elemento al hacer clic fuera

Toma de referencia el ejemplo que te mostré. Fíjate que hay una parte en la que tomo al elemento al que se le dio el clic, lo comparo con otros elementos y, según el resultado de dicha condición, realizo una acción. Por cierto, para hacer esto, no es necesario usar una librería, en mi ejemplo tienes una prueba de lo que digo.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #5 (permalink)  
Antiguo 03/11/2014, 12:14
 
Fecha de Ingreso: agosto-2014
Mensajes: 48
Antigüedad: 5 años, 6 meses
Puntos: 1
Respuesta: Ocultar elemento al hacer clic fuera

No se mucho de esto... no entiendo. Si pudieras hacerme un ejemplo con un recuadro y dentro un formulario, que es lo que necesito, te lo agradecería muchismo. Preferiblemente con Jquery. Pero ya sabrás tu.
  #6 (permalink)  
Antiguo 03/11/2014, 14:43
Avatar de GeekGirl  
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 5 años, 7 meses
Puntos: 44
Respuesta: Ocultar elemento al hacer clic fuera

A ese código falta simplemente modificarle dos cosas. Para ocultar/mostrar en vez de usar fadeIn/fadeOut, podés usar la función fadeToggle(). En cuanto a capturar el click sobre todo el documento, hay que usar document para que funcione si el body no tiene un alto definido y está prácticamente vacío:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     $('.btn_mi-cuenta').click(function(e){
  3.         e.stopPropagation();
  4.         $('#conten_mi-cuenta').fadeToggle();
  5.     });
  6.  
  7.     $(document).click(function(e) {
  8.         if (e.target.id !== "conten_mi-cuenta") {
  9.             $('#conten_mi-cuenta').fadeOut();
  10.         };
  11.     });
  12. });

Etiquetas: javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:13.