Diseño Web Javascript
Continuando con los tutoriales de Diseño Web, hoy les traemos uno en el que les enseñaremos como hacer las famosas “ventanas modales”. Si no conocen el término, las ventanas modales es aquel efecto que cuando hacemos click en un enlace, la pantalla se oscurece y aparece sobre ese opacado una nueva ventana con el contenido sin la necesidad de cargar una página completamente nueva. Así el usuario luego solo cierra la ventana modal y vuelve a la página anterior sin tener que recargarla.
Todo el detalle de este tutorial, como siempre, después del salto.
Como siempre lo primero:
Con todos los materiales listos, vamos manos a la obra:
Lo que haremos básicamente será hacer uso de una librería hecha en Javascript llamada MOODalBox, la cual ha sido programada y preparada para simplificar el proceso a los usuarios que son más novatos en el tema (como nosotros).
Nota: A pesar de que en la página de su creador se indica que en la ventana modal se puede cargar cualquier tipo de contenido (imagenes, archivos HTML, archivos PHP, etc) se pueden presentar algunos problemas al cargar contenidos como formularios, entre otras cosas. De cualquier forma, es cosa de ir probando, ya que no es que todos corran mal o todos corran bien.
1.- Lo primero que debemos hacer, luego de descargar el archivo correspondiente, es descomprimirlo, con lo que nos quedarán 3 carpetas: css, js e img. La primera contiene un archivo de tipo CSS que corresponde a la hoja de estilo de la librería, la segunda contiene los archivos correspondientes a la librería propiamente tal, y el tercero unas imagenes correspondientes a un gif que indica que la ventana se está cargando y una imagen para vincular el cierre de la ventana modal una vez que se abra.
2.- Luego en nuestro editor Web, creamos un archivo de tipo HTML (puede ser PHP, ASP, JSP u otros), e incluimos entre las etiquetas <HEAD> y </HEAD> lo siguiente:
<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/moodalbox.js"></script>
<link rel="stylesheet" href="/css/moodalbox.css" type="text/css" media="screen" />
Esos 3 códigos corresponden a incluir dentro del archivo las 2 librerías en Javascript que se utilizan: “mootools.js” y “moodalbox.js” que se encuentran en la carpeta js y además incluir la hoja de estilo respectiva, o sea, “moodalbox.css” la cual como indicamos anteriormente, se encuentra en la carpeta css.
3.- Luego creamos un hipervinculo o enlace al contenido que queremos desplegar en la ventana modal, y en la vista de código, agregamos lo siguiente en la etiqueta correspondiente:
<a href="ejemplo.jpg" rel="moodalbox">Abrir imagen</a>.
4.- Guardamos a continuación la página HTML que estamos haciendo.
5.- Subimos los archivos a nuestro alojamiento Web, respetando las rutas correspondiente, o sea en la raíz subimos la página HTML y la imagen que queremos mostrar, y además las carpetas correspondientes a la librería, las css, js e img.
6.- Vamos a nuestra página y hacemos click en el enlace para ver el efecto funcionando, algo como esto:
Y listo, pueden disfrutar de sus ventanas modales y darle estilo a sus sitios de manera fácil y rápida.
Antes de terminar, algunas notas adicionales:
1.- Pueden ajustar el ancho y alto de la ventana que se abrirá, añadiendo los valores correspondientes en la etiqueta del enlace, en la sección rel. Por ejemplo, si quieren que la ventana que se abra sea de 600 x 400 pixeles, pueden crear el enlace así:
<a href="link al contenido" rel="moodalbox 600 400">Abrir enlace</a>
2.- Además, pueden ajustar opciones del estilo, como la opacidad y otros editando el archivo .CSS que viene adjunto. Para esto se recomienda tener algunos conocimientos en hojas de estilo.
3.- En caso de que no se les abra al hacer clicks, revisen las rutas de los archivos que incluyeron (código correspondiente al paso 2.
4.- No podemos decir que no funcione nunca, pero al menos aquí no nos funcionó cuando intentamos enlazar desde una imagen mapeada. De cualquier forma recomendamos probar.
5.- Existen otras librerías desarrolladas que provocan el mismo efecto y tienen otras características, como Lightbox Gone Wild!, la cual pueden descargar y probar desde la página de su creador.
Como siempre, este tutorial ha sido desarrollado, probado y documentado por el equipo de Como Lo Hago, por lo que cuenta con nuestro Sello de Garantía.
Cualquier duda o consulta, pueden dejarnos unas líneas en el área habilitada a continuación.
Esperamos que este tutorial haya sido de utilidad para Uds.
Muchas gracias por leer y será hasta una próxima oportunidad.
10:20:23 pm
Algo pasa con el archivo que dejaron. Hago click en el enlace para descargar (supuestamente) un .zip y se abre una ventana que se interrumpe gracias a que mi antivirus NOD32 detiene la ejecución de un troyano.
9:49:23 am
@Lester Fibla: Gracias por avisarnos, la verdad es que habíamos vinculado el archivo directo del sitio del creador y no nos habíamos percatado del detalle que mencionas.
Hemos subido el archivo en el servidor de CLH, así que ahora se puede descargar directo.
Saludos
5:16:27 pm
Tengo un problema con esto, al momento de cargar una pagina que trabaja con css y js, no funciona, pues solo se muestra el contenido sin formato, como puedo hacer?
9:05:01 am
A mi no me funciona, pincho en el enlace y se me abre en el mismo navegador, y no es eso lo que se pretende, no ?
1:42:45 pm
me pueden ayudar hacer una ventana modal que sea preloader de flash, esto es se abra la ventana modal y se quede ahi mientras carga la pagina con el swf, al termino de la carga se va la ventana modal… grax
12:09:55 am
Muy buen tuto, estaba buscando sobre ello y lo encontre aca, muchas gracias.
saludos desde Perú
1:45:32 pm
Hola buenos dias, respecto de moodalbox quiero saber si es posible manejarlo con formularios y si en determinado momento se pueden hacer las validaciones y mostrar los datos incorrectos y volver a cargar el formulario inicial para que el usuario corrija los datos incorrectos y lo vuelva a mandar.
En espera de sus comentarios quedo a sus ordenes.
Atentamente
Raymundo Bautista
12:44:23 am
uan consulta…
en la ventana modal inclui un formulario de ingreso de datos con un boton Aceptar. el problema esta en que cuando le doy clic al boton Aceptar para almacenar los datos y cerrar la ventana. Este boton solo cierra mas no almacena. como almacenar y cerra la ventana??
5:30:39 pm
Hola, ¿es posible abrir la ventana (Moodalbox) desde un botón flash?.
Gracias
10:48:09 am
HOla que tal amigos, es posible que este efecto de pantalla modal se ejecute automaticamente al abrir mi pagina web de manera de arrojar un mensaje a los visitantes antes de navegar por mi pagina?? Espero su pronta respuesta