Hola a todos, como el titulo lo dice hoy vamos a ver como cerrar una capa <div> dando click fuera de ella, para lograrlo contaremos con la ayuda del framework jQuery.

1. Primer paso tenemos que definir dos capas, una como contenedor de la otra y un botón para capturar el evento, el cual permitirá mostrar la capa principal.

<div id="contenedorPrincipal">

<div id="contenedorInterno">

<img src="http://www.google.com.co/images/srpr/logo3w.png" border="0">

</div>

</div>

<input type="button" id="botonVerCapa" value="Ver Capa">

2. Creación de estilos para las dos capas.

#contenedorPrincipal{

background-image: url(images/transparencia.png);

display:none;

height:100%;

position:fixed;

width:100%;

z-index: 9999;

}

#contenedorInterno{

height:70%;

margin-left:15%;

margin-top:15%;

width:70%;

}

Esta capa con transparencia nos servirá para bloquear por completo la vista el Web-site y servir para la detección del evento click fuera de la capa interna.

3. Ahora dentro de las etiquetas de encabezado agregamos lo siguiente, si es para implementar sobre WordPress vamos a usar el identificador jQuery, sino podemos hacer uso del signo $:

<script type="text/javascript">

$(document).ready(function(){

// Capturar evento del botón

$('#botonVerCapa').live("click",function(){

$('#contenedorPrincipal').fadeIn('slow'); // Visualiza la capa principal

return false; //Para evitar el efecto de burbujeo

});

// Combinación de eventos (mouseout y click) para realizar el efecto deseado

$('#contenedorInterno').live('mouseout',function(){

/*

* Se captura el evento click siempre y cuando este suceda fuera

* de la capa interna para cerrar la capa principal que es el contenedor

* de la capa interna

*/

$('#contenedorPrincipal').live("click",function(){

$('#contenedorPrincipal').fadeOut('slow');

});

return false; // Para evitar el efecto de burbujeo

});

});

});

</script>

Bueno, es todo por hoy y espero les sea de total utilidad.