Diseño Web

Ξ 19 comentarios

Cómo crear una ventana modal en tus sitios Web

por Xabadu
Cómo crear una ventana modal en tus sitios Web

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.

Cómo crear una ventana modal en tus Sitios Web

Como siempre lo primero:

Implementos necesarios:

  1. Un editor Web idealmente (de cualquier forma pueden editar mediante block de notas). Para este caso utilizaremos Adobe Dreamweaver CS3, el cual pueden descargar en su versión de evaluación desde este enlace.
  2. La librería MOOdalBox de Javascript, la cual pueden descargar directamente desde el Sitio de su creador, en este enlace.

Con todos los materiales listos, vamos manos a la obra:

Procedimiento:

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.

Sello de GarantÍa CLH

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.

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

19 Comentarios

  • 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.

  • @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

  • 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?

  • 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 ?

  • 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

  • Muy buen tuto, estaba buscando sobre ello y lo encontre aca, muchas gracias.
    saludos desde Perú

  • 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 

  • 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??

  • Hola, ¿es posible abrir la ventana (Moodalbox) desde un botón flash?.
    Gracias
     

  • 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

1 2

Responder a Xabadu Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos