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.

[sourcecode language=»html»]

[/sourcecode]

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

[sourcecode language=»css»]

#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%;

}

[/sourcecode]

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 $:

[sourcecode language=»javascript»]

[/sourcecode]

 

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