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:
1 2 3 | $('body').click(function() { $('#capa').fadeOut(); }); |
1 2 3 | $('#cv').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.
Desarrolladora web desde hace casi 15 años. Especializada en presencia online para profesionales y pequeñas empresas que quieren aprovechar las herramientas de marketing online para hacer crecer su negocio.
Maravilloso. Sencillo y corto. Excelente aporte, y funciona estupendamente.
🙂 Muchas gracias Ezan!