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]
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