Caja modal en HTML5 y jQuery

Topic created · 1 Mensajes · 5342 Visitas
  • 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