Cómo hacer cajas modales en su sitio

Los fragmentos de código y plugins jQuery simplificar la adición de cajas modales de su sitio web.

Descarga un script cuadro modal como Facebox, FancyBox o PrettyPhoto. Determine qué script utilizar al decidir lo que quiere el cuadro de modal de contener. Facebox está optimizado para las formas, el contenido HTML y mensajes simples de texto, mientras que FancyBox y PrettyPhoto son más adecuados para mostrar galerías de imágenes, vídeo o Flash. Copie los componentes de script descargado en la carpeta raíz de su sitio web o una carpeta script.

Abra su página de inicio con un editor de texto o WYSIWYG y siga archivo "readme" de la secuencia de comandos para incluir los componentes necesarios en la cabeza de su documento por copiar y pegar el código de ejemplo que se proporciona encima de la "/ head" etiqueta en el código HTML. Por ejemplo, utilice el siguiente código para incluir Facebox y su biblioteca jQuery dependiente, suponiendo que se ha copiado en la carpeta "js" en la raíz de su sitio web:

script src type = "/ js / jquery.js" = "text / javascript" / script

script src type = "/ js / facebox.js" = "text / javascript"

jQuery (document). listo (function ($) {

$ ("A [rel = * facebox] '). Facebox ()

})

/ Script

Abra la hoja de estilos CSS incluido en su escritura elegida y copiar los estilos en la hoja de estilo de su sitio web. Puede modificar los estilos de la manera que desee, e incluir gráficos personalizados siempre y cuando se actualizan los caminos de imagen a la ubicación en la que las imágenes se almacenan en el servidor Web.

Agregar el atributo de vínculo necesario con los elementos que desea que abrir el cuadro de modal. Este atributo se define en la documentación del guión, y suele ser tan simple como añadir un "id" o el valor "rel" a su red de marcado. Por ejemplo, para crear un cuadro de diálogo con Facebox, se utiliza un atributo "rel" con un valor de "facebox" en el enlace:

a href = "images / stairs.jpg" rel = "facebox" Este es el texto de diálogo. / a

Utilice "PrettyPhoto" como el valor "rel" si se utiliza el guión PrettyPhoto para mostrar imágenes. Por ejemplo:

a = "images / stairs.jpg" rel = "PrettyPhoto" img src = "images / stairs_thumb.jpg" alt href = "escaleras" / / a

Consejos y advertencias

Asegúrese de que el script se carga en cada página donde desea que el cuadro de modal que se utilizará, si la ejecución del script en un sitio que utiliza documentos HTML independientes para cada página.