Cómo hacer un Modal

Ventanas Modal actuar como un marco dinámico para su contenido.

Ventanas modales son una forma nueva y discreta para mostrar contenido pop-up en sus páginas Web. Crear ventanas modales para ofrecer formularios de registro, mostrar imágenes a tamaño completo, muestre mensajes de confirmación o mostrar cualquier contenido que desee. Modals sobresalir en su flexibilidad de diseño, el contenido se hace flotar por encima de la página Web primario utilizando un efecto de superposición, y el elemento dentro de la modal puede ser de estilo cualquier número de maneras. Hay varios scripts y plugins que se pueden implementar en el código HTML o del sistema de gestión de contenidos ya hechos, pero puede crear un referente rápida y sencilla utilizando sólo CSS3 y HTML5.

Abra un editor de texto o HTML y crear un nuevo documento en blanco. Introduzca la etiqueta de HTML5 "tipo de documento":

! DOCTYPE HTML

Añadir las etiquetas básicas de estructura de documento para crear una plantilla vacía:

cabeza

/ Head

cuerpo

/ Cuerpo

/ Html

Crea tu contenido HTML. A los efectos de este ejemplo, es posible que tenga un envase simple con un poco de texto y algunas imágenes en miniatura para crear un mini-álbum:

div id = "contenedor"

Ejemplo / header headerGallery

Identificación section = "galería"

clase article = "description"

Haga clic en cada miniatura para ver una versión más grande.

/ Article

div id = "gallery_thumbs"

img src = "images/thumb1.jpg" alt = "1" /

img src = "images/thumb1.jpg" alt = "2" /

img src = "images/thumb1.jpg" alt = "3" /

/ Div

/ Sección

/ Div

Crea tu modal mediante la adición de otro DIV DIV debajo de su contenedor. Tome este DIV un identificador único que se utiliza para enlazar con el modal, y una clase que se utilizará para labrarlo. Para este ejemplo, debe crear tres verbos modales, uno para cada imagen en tamaño completo. Inserte la imagen en tamaño completo en el DIV y vincular cada uno mediante la asignación de la dirección a la "# close" ancla. Esto permitirá que el espectador simplemente haga clic en la imagen para cerrar la modal:

div id = class "img1" = "modal"

a href = "# estrecha" img src = "images/1.jpg" alt = "1" / / a

/ Div

div id = class "img2" = "modal"

a href = "# estrecha" img src = "images/2.jpg" alt = "2" / / a

/ Div

div id = class "img3" = "modal"

a href = "# estrecha" img src = "images/3.jpg" alt = "3" / / a

/ Div

Crear vínculos de sus miniaturas de las imágenes mediante el encapsulado en la etiqueta "a href". Para abrir la imagen a tamaño completo en el modal, debe configurar la dirección URL de cada enlace como el ancla o ID definido en el DIV modal correspondiente:

div id = "gallery_thumbs"

a href = "# img1" img src = "images/thumb1.jpg" alt = "1" / / a

a href = "# img2" img src = "images/thumb1.jpg" alt = "2" / / a

a href = "# img3" img src = "images/thumb1.jpg" alt = "3" / / a

/ Div

Coloque el cursor bajo la etiqueta de "cabeza" y escriba la etiqueta "estilo":

estilo

/ Estilo

Los estilos CSS para sus elementos y contenedores modales serán colocados aquí. Opcionalmente puede ponerlas en un documento "style.css" independiente y vincular la hoja de estilo a su lugar de HTML. Para crear el efecto modal, la clase modal debe por lo menos tener una posición de "absoluto", dijo un alto "z-index", y un "display: none" atributo:

. Modal

{

width: 100%;

height: 100%;

position: absolute;

top: 0;

izquierda: 0;

display: none;

z-index: 999;

fondo: rgba (0,0,0,0.5);

-Webkit-animación-duración: 1s;

-Webkit-animación-name: desvanecimiento;

-Webkit-animación-repetición-count: 1;

-Webkit-animación dirección: normal;

}

Para el estilo de la relación "estrecha", añade un estilo para su "a" tag:

. Modal

{

display: block;

vertical-align: right;

text-align: center;

}

Para crear un marco de estilo elegante o efecto "Polaroid", añade un estilo para el tag "img":

. Modal img

{

padding: 5px 5px 45px 5px;

background: # ffffff;

-Webkit-box-shadow: 0px 0px 15px # 444;

-Moz-box-shadow: 0px 0px 15px # 444;

-Webkit-animación-Duración: 0.50s;

-Webkit-animación-name: crecer;

-Webkit-animación-repetición-count: 1;

-Webkit-animación dirección: normal;

-Webkit-animación-timing-function: facilidad-in;

}

Añadir un más estilo para su clase "modal" con el ": target" pseudo selector. Este selector le permite establecer la URL de destino de un enlace para mostrar el contenido de un elemento oculto, que en este caso es el contenedor modal.

. Modal: target {

display: table;

height: 100%

}

Continúe agregando los estilos adicionales para las miniaturas o contenido que desee. Guarde los archivos y obtener una vista previa en el navegador para ver los resultados.

Consejos y advertencias

Para mostrar el contenido en lugar de una imagen, cambiar el estilo de "modal.content." Y darle a su DIV contenido de una clase de "contenido", "modal img.":

div id = class "Dialog1" = "modal"

div class = "contenido"

Este es un ejemplo de un cuadro de diálogo modal.

a href = "# estrecha" OK / a

/ Div

/ Div