Ocultar capa al hacer clic fuera de ella con jQuery

[…]


por

Muchas veces utilizamos jQuery para mostrar una capa sobre la misma página web al hacer clic en un elemento o enlace para, por ejemplo, ofrecer información ampliada u otros detalles.

Para mostrarla, podemos utilizar el evento click de jQuery sobre el elemento concreto que queramos, pero a veces nos interesa que para cerrarla no se tenga que hacer clic en un enlace o elemento de Cerrar, sino que simplemente clicando en cualquier otro sitio de la página, la capa se oculte.

Para ello, podemos utilizar la siguiente función:

$('body').click(function() {
 $('#capa').fadeOut();
});
$('#capa').click(function(event){
 event.stopPropagation();
});

Nota: podemos utilizar fadeIn() y fadeOut() en lugar de show() y hide() para que el elemento se muestre/oculte de forma  más suave.

 

Comentarios

4 respuestas a «Ocultar capa al hacer clic fuera de ella con jQuery»

  1. Avatar de Ezan

    |

    Maravilloso. Sencillo y corto. Excelente aporte, y funciona estupendamente.

    1. Avatar de esther

      |

      🙂 Muchas gracias Ezan!

  2. Avatar de Juan Villasmil

    |

    Que seria el #CV?

    1. Avatar de esther

      |

      Es el ID de la capa, estaba equivocado en el ejemplo, es #capa, ya lo he corregido. Gracias!