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.
9:41:24 pm
que tal.
para poder ejecutar directamente esta la funcion.
MOOdalBox.open(“pagina.html”,”titulo”,”800 400″)
el ultimo (800 400) es la dimension del modalbox
puedes crear una funcion que ejecute codigo y con un setTimeOut, ejecutarlo.. ya que tiene que cargar por completo la pagina para poder ejecutarlo…
saludos y suerte… LUIS>>>
9:42:17 pm
que tal… para poder ejecutarlo desde un boton en flash.
deben agregar en el html que va a contener el flash una funcion que ejecute el siguiente codigo:
MOOdalBox.open(“pagina.html”,”titulo_inferior”,”ancho alto”)
ejemplo:
en el html qeu contiene el flash.
function modalbox(){
MOOdalBox.open(“pagina.html”,”titulo”,”800 400″)
}
y del flash llamamos a la funcion java de esta manera:
getUrl (“javascript:modalbox()”);
8:51:01 am
@LUIS: Muy buenos aportes! Gracias!
1:31:34 pm
Muchas gracias por el aporte, deberian existir muchas más paginas como esta, nos ayuda a todos
12:36:08 am
Gracias Luis, llevaba horas buscando una solucion y con MOOdalBox.open() la encontre.
12:26:32 am
como hago para que aparezca un ventana modal despues de hacer un insert sql en php,???
12:57:40 am
Pucha creo que con modalbox es mucho mas facil, yo me mande haciendo casi lo mismo (solo que muestra un video de youtube) pero para wordpress, y bueno, le añadi un cookie para que se muestre una sola ves al dia y no este molestando a cada rato. pero con modalbox, aunque no lo he probado parace mas facil de todas maneras te dejo el enlace para que me des tu opinion, http://blog.rogersoto.com/blog/programacion/abrir-una-ventana-al-cargar-el-blog/
gracias!!
1:00:35 pm
el archivo no se puede descargar no lo encuentra… :S
12:38:03 am
the main other exercises that interests personalized the actual styles and designs regarding clothing is because they often buy totally elaborate and brilliant colorations at extenuate the better suggestions that can often proceed to not noticed,
[url=http://www.myluckyjersey.net/wholesale-fc-barcelona-201617-away-deep-purple-women-soccer-jersey-really-cheap-p53.html]best place to buy cheap girls long sleeve soccer goalie jersey[/url]