jQuery ocultar haciendo clic fuera de div

Hola,

Estoy tratando de hacer una visualización dinámica de JavaScript de una imagen.

Aquí está mi código:

$('.info_image').click(function () { $('.info_image_click').show(); });

Cuando alguien hace clic en “info_image” (esa es la imagen pequeña) abre “info_image_click” (esa es la imagen grande). No sé cómo los usuarios pueden ocultar el “info_image_click” haciendo clic fuera del contenedor en el que se encuentra. Perdón por mi inglés 🙂

Prueba esto:

 $('.info_image').click(function (e) { // Used to stop the event bubbling.. e.stopPropagation() $('.info_image_click').show(); }); // Hide the "info_image_click" by clicking outside container $(document).click(function () { $('.info_image_click').hide(); }); 

intenta usar

 $(document).not('. info_image_click').click(function() { // Do your hiding stuff here. }); 

Agregar clic cuerpo:

  

Si es posible intente cambiar su DOM , entonces no hay necesidad de jQuery también

  

Si lo que intenta hacer es conseguir que su imagen sea modal (es decir, la página siguiente esté inactiva hasta que la imagen esté oculta), puede crear una superposición invisible (con una opacidad muy pequeña, típicamente 0.01) del mismo tamaño de su página, y la cubre, y tiene un índice z (una posición “vertical”) entre el de su página (que normalmente sería 0) y el de su zona “modal” (es decir, en este caso, la imagen info_image_click ), que puede ser cualquier cosa más grande que 0.

A continuación, establece el evento de clic de superposición para que la imagen y la superposición se oculten cuando se hace clic en la superposición.

Al hacer esto, se asegura de que cuando un usuario haga clic en la ventana, si está dentro de la imagen, no ocurre nada (dado que la imagen tiene un índice z más alto obtendrá el evento click, que no está asignado), y si está afuera la imagen, la superposición (y no la página, ya que tiene un índice Z más bajo) obtendrá el evento click y hará lo que quiera (ocultará la imagen y la superposición, volviendo así a la página principal).

Puede poner la superposición en una opacidad superior a 0.01 si desea que sea una pista para el usuario de que la imagen es modal.

Borrador rápido de cómo lo haría en jQuery:

 showWindowModal: function(windowSelector) { $("
") .addClass("overlay") .appendTo($("#main")) .css({ width: $("#main").outerWidth(), height: $("#main").outerheight() }) .click(function() { $(windowSelector).remove(); $("#main > div.overlay").remove(); }); $(windowSelector).addClass("modal").show(); }

clases de css:

 #main > div.overlay { position: absolute; background: white; z-index: 100; opacity: 0.5; filter:alpha(opacity=50); /* For IE8 and earlier */ } .modal { z-index: 1000; }