Cómo hacer cajas modales en su sitio

cajas modales crean un marco elegante para sus imágenes, formularios o cuadros de diálogo, que se superpone a la página Web, lo que permite una perfecta integración de elementos interactivos que no toman al espectador lejos del contenido de la página. El uso de un fondo opaco que abarca toda la ventana del navegador proporciona una experiencia visual agradable y se centra en el usuario el contenido de cada caja modal presenta. Puede codificar un referente por sí mismo utilizando técnicas de HTML5 y CSS3, si usted tiene la habilidad, pero es mucho más eficiente para hacer una caja modal para su sitio web mediante el uso de una de una variedad de secuencias de comandos de jQuery elegantes.

Instrucciones

1 Descargar un script cuadro modal como Facebox, FancyBox, o PrettyPhoto. Determinar qué secuencia de comandos para utilizar al decidir lo que quiere el cuadro de modal para contener. Facebox está optimizado para las formas, el contenido HTML y mensajes de texto simples, mientras que FancyBox y PrettyPhoto son más adecuados para la visualización de galerías de imágenes, vídeo o Flash. Copiar los componentes de script descargado en la carpeta de la carpeta raíz o el guión de su sitio web.

2 Abra su página de inicio en un editor de texto o WYSIWYG y seguir archivo de la secuencia de comandos "readme" para incluir los componentes necesarios en la cabeza de su documento por copiar y pegar el código de ejemplo proporcionado justo por encima de la etiqueta "</ head>" 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 una carpeta "js" en la raíz de su sitio web:

<Script type = "text / javascript"> </ script>

<Script type = "text / javascript">

jQuery (document) ready (function ($) {

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

})

</ Script>

3 Abra la hoja de estilos CSS se incluye con su escritura elegida y copiar los estilos en hoja de estilo de su sitio web. Es posible modificar los estilos en cualquier forma que desee, e incluir gráficos personalizados, siempre y cuando se actualizan los caminos de imagen a la ubicación de donde se almacenarán las imágenes en el servidor Web.

4 Añadir el atributo de enlace requerida a los elementos que desea tener en marcha el cuadro de modal. Este atributo se define en la documentación de la escritura, y suele ser tan simple como la adición de un "id" o el valor "rel" a su enlace marcado. Por ejemplo, para crear un cuadro de diálogo con Facebox, se utiliza un atributo "rel" con un valor de "facebox" en su enlace:

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

Use "PrettyPhoto" como el valor "rel" si se utiliza la secuencia de comandos PrettyPhoto para mostrar imágenes. Por ejemplo:

<a href="images/stairs.jpg" rel="prettyPhoto"> <img alt = "escaleras" /> </a>

Consejos y advertencias

• Asegúrese de que la secuencia de comandos se carga en cada página donde desea que el cuadro de modal para ser utilizado, si la aplicación de la secuencia de comandos en un sitio que utiliza los documentos HTML independientes para cada página.