JMiur [E]

Modalbox es otro proyecto que permite crear ventanas modales y que utiliza Prototype y script.aculo.us. La idea es mostrarlas al estilo de las Macs, no centradas en la pantalla sino deplegándose en la parte superior del navegador [más información]

La documentación es bastante extensa y las posibilidades son muchas así que recomiendo leer los detalles en la sección Referencias o en el Wiki que han creado para eso.

En Blogger, podemos probar descargando el ZIP y allí nos encontraremos con ejemplos y las librerías necesarias.

Si no usamos Prototype, primero deberemos subir los archivos prototype.js, scriptaculous.js, effects.js y agregarlos en la plantilla tal como se muestra en este post. Para usar Modalbox necesitamos dos más: modalbox.js que es el script en si mismo y modalbox.css que es la hoja de estilo. Alojamos ambos en un servidor como Google Pages y luego, los agregamos justo antes de </head>:
<script type="text/javascript" src="URL_modalbox.js"></script>
<link rel="stylesheet" href="URL_modalbox.css" type="text/css" media="screen" />
En términos generales, para usarla, basta un enlace y llamar a la función:
<a href="direccion_URL" onclick="Modalbox.show(parametros); return false;">
TEXTO/IMAGEN
</a>
Una forma sencilla de usarla es crear un bloque, ocultarlo y luego mostrarlo.

El bloque oculto tiene el siguiente código:
<div id="MBejemplo1" style="display: none;">
... cualquier texto ...
<input onclick="Modalbox.hide()" value="SI" type="button"/>
<input onclick="Modalbox.hide()" value="NO" type="button"/>
</div>
Y el enlace tiene este otro:
<a onclick="Modalbox.show($('demoMB'), {title: this.title, width: 300}); return false;"
class="demo-btn" title="UN EJEMPLO" href="javascript:void(0);">
CLICK para ver un BLOQUE OCULTO
</a>
Usamos el evento onclick para abrir la ventana:

onclick="Modalbox.show($('MBejemplo1'), {title: this.title, width: 300}); return false;"

indicamos el ID del bloque oculto (MBejemplo1) y los parámetros entre llaves y separados por comas. En este caso son:

title: this.title indica que el título de la ventana será el mismo que el del bloque, si quisiéramos usar otro, cambiamos this.title por el texto: title: 'OTRO TITULO'
width: 300 es el ancho de la ventana expresado en pixeles; el alto será el del contenido.

Hay muchas más alternativas posibles así que recomiendo que le den una mirada, sobre todo al ejemplo donde se muestra un formulario de contacto idea

10 comentarios:

Anónimo  

Por favor, pudieras decirme ¿cómo se borra un comentario con el nuevo formulario para comentarios de blogger, como éste que tienes? No puedo borrar uno que puse yo misma para prueba :(

Muchas gracias, te lo agradeceré mucho.

Un abrazo
Carmen.

Responder
Anónimo  

Ya pude borrar el comentario, muchas gracias :D

Carmen

Responder
Androide 23:  

Gracias por dárnoslo a conocer.
Estaría bueno que pusieras un ejemplo en el post (?).
¡Saludos!

Responder
JMiur  

A veces es imposible hacerlo porque los scripts terminan interfiriendo unos con otros. Este es uno de esos casos.

Responder
Anónimo  

Una consulta: si uno le mete al blog tanta cosa (o algunas) ¿no se vuelve pesada su descarga?

Responder
JMiur  

Esa es una decisión personal y subjetiva. Depende de lo que necesites hacer y cómo quieras mostrarlo. No hay reglas fijas.

Responder
Anónimo  

Si, eso lo entiendo. ¿Pero entre más cosas tenga uno metido en el blog, más pesada es la descarga?

Responder
JMiur  

Sí y no. Depende de qué sean y para que las utilices ¿Qué es más pesado, colocar 10 videos o tener un script que los maneje? No hay respuestas tan simples.

Responder
Sanjony Yasmany  

Como pudiera hacer, para que cuando me salga la ventana del modalbox no me deje hacer nada en la pagina de atras, o sea, que hasta que no me realice una accion dentro del modalbox no pueda salir...

Responder
JMiur  

HAbría que rehacer el script y cambiarlo para que hiciera eso.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR