Caja modal en HTML5 y jQuery

[gunit]

gunit Última edición por

Una caja modal es una pequeña ventana o dialogo que se muestra al usuario para que introduzca datos, mostrar un error, una advetencia, un anuncio etc.
En este tutorial voy a explicar como hacer una simple caja modal, darle estilo con CSS y mostrarla dinamicamente con jQuery haciendo click en un enlace.

El resultado final deberia ser parecido a este :

Pueden ver una demo online aqui: http://www.stackforo.com/modal_box/

Paso 1. La base HTML

Vamos a hacer una plantilla base en HTML5, luego le añadiremos la caja y los elementos necesarios.

[php]

[/php]

Por el momento incluimos jQuery y la hoja de estilos "estilos.css" que crearemos mas adelante.

Paso 2. Estructura básica de la caja

Seguimos escribiendo dentro del la esctructura de la caja y el div "oscuro" que ocultara el contenido del sitio web menos la caja con un color oscuro.

[php]

[/php]

La capa que ocultara el contenido de la web le ponemos la id "oscuro" ya que solo vamos a necesitar uno.
Creamos la capa con la clase caja (podremos usar la clase para crear diferentes cajas), y la dividimos en cabecera y contenido. En la cabecera iran el titulo y el icono de cerrar la caja.
Y en el contenido, pues eso, el contenido :P.

Paso 3. Rellenamos la caja con contenido

En este paso solamente vamos a rellenar el titulo, algo de texto y una imagen en el contenido, no es necesario poner lo mismo.

[php]

Caja modal

Este es el contenido de la caja modal.

[/php]

El codigo HTML completo :

[php]

Caja modal

Este es el contenido de la caja modal.

[/php]

Paso 4. Estilos basicos

De momento, deberian tener algo como esto :

Es feo verdad? Vamos a darle un poco de estilo con CSS.
Creamos nuestra hoja de estilos llamada "estilos.css" y empezamos con los estilos generales.

[php]
* {
margin: 0;
padding: 0;
outline: 0;
}

body {
font-family: "Arial", sans-serif;
font-size: 12px;
background-color: #ededed;
}
[/php]

Con el simbolo *, le decimos al parser de CSS que aplique el estilo a TODOS los elementos, les quitamos el margen exterior y interior que llevan por defecto.
Al body, cambiamos la fuente por Arial, y si no existe, por cualquier fuente del tipo sans serif. Tamaño de la fuente 12px y color de fondo gris claro.

**Paso 5. Dandole forma a la caja **

La capa oscura debe ocupar el 100% de la pantalla, fondo de color negro, posicion fija (para que siga la pantalla cuando hacemos scroll), el z-index indica que esta encima de las demas capas, y le indicamos que sea medio transparene.
La caja debe ser de fondo blanco, tambien de posición fija, debe estar encima de la capa oscura (z-index 1), le damos un margen de 50 pixeles, un borde negro de 1 pixel de anchura y un poco de sombra.

[php]
#oscuro {
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
z-index: 1;
opacity: 0.5;
}

.caja {
background-color: #fff;
position: fixed;
z-index: 2;
margin: 50px;
border: 1px solid #000;
box-shadow: 0px 0px 3px #222;
}
[/php]

**Paso 6. La cabecera **

[php]
.caja .cabecera {
font-size: 14px;
font-weight: bold;
padding: 5px 10px;
color: #fff;
background-color: #333;
border: 1px solid #444;
text-shadow: 0px -1px 0px #000;
}
[/php]

En el estilo de la cabecera, el titulo debe ser mas grande que el texto normal, por lo que asignamos 14px al tamaño de la fuente y le ponemos negrita (font-weight: bold)
Añadimos un margen interior de 5px debajo y arriba, y 10px en los laterales :

Indicamos que queremos el texto de color blanco y fondo gris muy oscuro. Combinando un borde gris claro con el borde de la caja conseguimos este efecto en los bordes :

Tambien podemos cambiar el estilo a este para conseguir una cabezera de color azul :

[php]
.caja .cabecera {
font-size: 14px;
padding: 5px 10px;
color: #fff;
font-weight: bold;
background-color: #219eff;
border: 1px solid #47abff;
text-shadow: 0px -1px 0px #265e8e;
}
[/php]

Paso 7. El titulo y el icono de cerrar

Hacemos que el titulo se coloque a la izquierda (float left) y el boton de cerrar en la derecha (float right).

Usaremos este sprite para el boton de cerrar :

El sprite tiene un tamaño de 40x20px, usaremos los primeros 20 pixeles para el boton y cuando se pase el boton por encima (:hover) vamos a movernos 20px hacia la derecha para usar el segundo icono, cambiaremos el cursor del raton a la mano para que de la sensacion de que se puede hacer click.

[php]
.caja .cabecera .titulo {
float: left;
line-height: 20px;
}

.caja .cabecera .cerrar {
float: right;
width: 20px;
height: 20px;
background: url("cerrar.png") no-repeat 0px 0px;
}

.caja .cabecera .cerrar:hover {
background: url("cerrar.png") no-repeat -20px 0px;
cursor: pointer;
}

.clear
{
clear: both;
}
[/php]

Paso 8. El contenido

Le damos un margen interior a la capa de 10px en todos los lados, un fondo de color gris claro y el texto de color gris casi negro.
Le ponemos un borde negro a todas las imagenes, un margen de 5px exterior en los lados superior e inferior y una pequeña sombra.

[php]
.caja .contenido {
padding: 10px;
background-color: #ededed;
color: #444;
border: 1px solid #fff;
line-height: 22px;
}

.caja .contenido img {
margin: 5px 0px;
background-color: #fff;
border: 1px solid #333;
box-shadow: 0px 1px 3px #aaa;
}
[/php]

Paso 9. Creando el link

Ahora deberiamos tener algo parecido a la imagen del resultado final, solo que ahora tenemos que colocar la caja en el centro y hacer que se muestre cuando hacemos click en un link.

Añadimos el link justo despues de la capa "oscuro", quando se haga click al link, llamara a la funcion "mostrarCaja();" que definiremos en el siguiente paso.

[php]
Mostrar caja
[/php]

y hacemos que la caja y la capa oscura esten ocultos por defecto añadiendo "display: none; "a sus estilos :

[php]
#oscuro {
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
z-index: 1;
opacity: 0.5;
display: none; /* aqui */
}

.caja {
background-color: #fff;
position: fixed;
z-index: 2;
margin: 50px;
border: 1px solid #000;
box-shadow: 0px 0px 3px #222;
display: none; /* aqui */
}
[/php]

Una vez hecho, deberiamos tener una pagina con solo 1 link.

Paso 10. Mostrar la caja

Definiremos la funcion mostrarCaja justo despues de los estilos, de manera que el head quede asi :

[php]

[/php]

Ahora al hacer click al link, la caja deberia mostrarse.

Paso 11. Esconder la caja

Para detectar el click en el boton de cerrar, cambiarmos el span cerrar por:

[php][/php]

Ahora lo unico que hay que hacer es definir la funcion esconderCaja justo despues de la funcion de mostrar :

[php]
function mostrarCaja()
{
$("#oscuro").fadeIn();
$("#imagen").fadeIn();
}

function esconderCaja()
{
$("#oscuro").fadeOut();
$("#imagen").fadeOut();
}
[/php]

Paso 12. Centrar la caja

Para centrar la caja, debemos calcular las coordenadas del centro de la pantalla y cambiar la posicion de la caja, logicamente, el centro es el tamaño partido por 2, usaremos una funcion que encontre en Stackoverflow:
http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen

Copiaremos la funcion encima de mostrarcaja :

[php]
jQuery.fn.center = function () {
this.css("margin","0");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}[/php]

y la llamaremos desde nuestra funcion :

[php]
function mostrarCaja()
{
$("#imagen").center();
$("#oscuro").fadeIn();
$("#imagen").fadeIn();
}[/php]

Codigo completo

HTML :

[php]

Mostrar caja

Caja modal

Este es el contenido de la caja modal.

[/php]

CSS :

[php]
* {
margin: 0;
padding: 0;
outline: 0;
}

body {
font-family: "Arial", sans-serif;
font-size: 12px;
background-color: #ededed;
}

.clear {
clear: both;
}

#oscuro {
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
z-index: 1;
opacity: 0.5;
display: none; /* aqui */
}

.caja {
background-color: #fff;
position: fixed;
z-index: 2;
margin: 50px;
border: 1px solid #000;
box-shadow: 0px 0px 3px #222;
display: none; /* aqui */
}

.caja .cabecera {
font-size: 14px;
padding: 5px 10px;
color: #fff;
font-weight: bold;
background-color: #333;
border: 1px solid #444;
text-shadow: 0px -1px 0px #000;
}

.caja .cabecera .titulo {
float: left;
line-height: 20px;
}

.caja .cabecera .cerrar {
float: right;
width: 20px;
height: 20px;
background: url("cerrar.png") no-repeat 0px 0px;
}

.caja .cabecera .cerrar:hover {
background: url("cerrar.png") no-repeat -20px 0px;
cursor: pointer;
}

.caja .contenido {
padding: 10px;
background-color: #ededed;
color: #444;
border: 1px solid #fff;
line-height: 22px;
}

.caja .contenido img {
margin: 5px 0px;
background-color: #fff;
border: 1px solid #333;
box-shadow: 0px 1px 3px #aaa;
}
[/php]

codigo adjunto