JMiur [E]

Lightbox Greybox Thickbox Modalbox son todas librerías que permiten crear ventanas modales; esas que se abren "sobre" la página misma y que son tan prácticas.

Pero, si bien los scripts son la forma más cómoda de utilizarlas, podemos crearlas utilizando sólo CSS. Eso es lo que nos enseñan en el sitio de Emanuele Feronato.

Cuando se abre una ventana de este tipo, toda la pantalla se pone oscura y transparente y arriba de todo se muestra un elemento con cierto contenido ¿Cómo se logra esto? Usando dos DIVs, un dentro del otro; el contendor es semitransparente y el contenido no pero, ambos permaneces ocultos hasta que hacemos click en algún enlace.

De manera genérica, este es el esquema de un código HTML:
<div id="nombreContenedor" class="black_overlay"></div>
<div id="nombreContenido" class="white_content">
... aqui irá el contenido a mostrar ...
</div>
Claro que esto, requerirá algunas definiciones CSS:
.black_overlay { /* afuera: la parte oscura */
background: #000000;
display: none;
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
z-index: 1001;
opacity: .75; /* opacidad para Firefox */
filter: alpha(opacity=75); /* opacidad para Internet Explorer */
}

.white_content { /* adentro: la ventana modal */
display: none;
position: absolute;
overflow: auto;
z-index:1002;
left: distancia; top: distancia; /* la posición de la ventana modal */
width: ancho; height: alto; /* el tamaño de la ventana modal */
/* cualquier otra propeidad, colores, márgenes, fondo */
}
Sólo falta el enlace para mostrar la ventana:
<a href="javascript:void(0);" 
onclick="document.getElementById('nombreContenedor').style.display='block';
document.getElementById('nombreContenido').style.display='block';">
ENLACE ABRIR
</a>
El contenido puede ser cualquier cosa pero es aconsejable que siempre haya un enlace para cerrar la ventana:
<a href = "javascript:void(0)"
onclick="document.getElementById('nombreContenido').style.display='none';
document.getElementById('nombreContenedor').style.display='none';">
ENLACE CERRAR
</a>

19 comentarios:

La Blogueria  

Me gusta mucho; se pierde el efecto de carga, lo cual estoy considerando si es una desventaja o una ventaja. Pero es realmente atractivo, y si se puede insertar cualquier contenido, no se puede pedir más.

¿Le darás muerte al lightbox, o te quedas con el sistema javascript?

¡Saludos!

Responder
Paulo  

Hola Jmiur, felicidades por tu blog, realmente es de mucha ayuda para nosotros los novatos, y supongo q para algunos usuarios avanzados también.
Tengo una consulta, si trabajo con este tipo de ventana modal, y quiero agregar una animacion en Fash, la precarga comienza en el momento en que se hace clic sobre el vinculo o comienza en modo escondido? es decir antes de que se muestre la ventana...
Agradezco por adelantado tu respuesta.
Paulo

Responder
LacraX07  

Me resulta practica y simple , pero sigo prefiriendo lightWindow :)

Responder
JMiur  

La Bloguería:
En realidad, no la reemplaza porque a eso le faltaría una parte sustancial que es definir el valor de la posición donde se mostrará la ventana. Top y Left cuando position es absolute, se refieren al largo de la página así que, en un blog, donde los posts se muestran con diferentes largos, el cálculo es más o menos complejo y debe hacerse con JavaScript.

En cambio, si se quisiera aplicar en la sidebar, por ejemplo, donde las cosas están ubicadas siempre en el mismo lugar, sería sencillo de implementar.

Lacrax:
Sí, por lo dicho antes, es más cómodo usar un script. El post, sólo pretende mostrar una técnica. Como cualquier otra, el resultado dependerá de la imaginación de cada uno :)

Paulo:
En una ventana modal como Lightbox, la carga se inicia al hacer click en el enlace. En una ventana modal como la del post, la carga se realiza con la página ya que el elemento, aunque no se ve, está dentro de la página web.

En principio, hay dos modos de trabajar; con scripts como LightWindow o de otro tipo que crean los elementos al hacer click en un enlace (lo que alivia la carga de la página); o sólo mantenerlo ocultos y mostrarlos cuando queremos (en ese caso, se cargan con el resto).

No sé si la explicación ha sido demasiado confusa :)

Responder
Paulo  

Para nada confusa, muchas gracias, eso es lo que necesitaba saber, entonces creo q me quedaré con el videobox, pues lo unico q me interesa es colocar animaciones flash.
Gracias de nuevo y sigue adelante, tu blog es genial.
Atte
Paulo (Un nuevo fan de JMiur y Vagabundia)

Responder
jorge ramirez  

Hola amigo, tengo un gran problema con lightwindow, todo perfeco a la hora de incorporarlo a mi web, pero cuando por ejemplo llamo a otra seccion utilizando ajax para que no refresque toda la pagina, y en la nueva seccion por ejemplo pongo un enlace para que por medio de light me abra dicho enlace en esa ventana pues defrente me abre en una nueva pagina y no carga como debe de ser.

A que crees que se deba esto?, por ajax??, no doy con el problema espero me payudenn.. gracias.. mi msn es jorge_ramirez_yto@hotmail.com, para cualquier apoyo mutuo siempre es bueno tener a alguien ahi. jej. saludos y felicidades JMiur gran site en verdad.

Responder
Anónimo  

saludos amigos.

Responder
JMiur  

Jorge:
Realmente, es una pregunta que me excede. Lo único que se me ocurre es que haya algún problema con la dirección de los archivos y que haya alguno que no se cargue. Eso podría chequearse online, ver si se han cargado los scripts.

Responder
ALEX  

Ayuda porfavor. Soy principiante en esto y lo que pones aqui es justo lo que necesito. Entiendo que es lo que hace, pero no entiendo donde debo ponerlo :S obvio las definicones van con el resto de las def. CSS pero el resto? Se que seguramente es algo tonto pero de verdad me ayudarias. Saludos.

Responder
JMiur  

Los enlaces y DIVs se colocan donde quieras que se muestren, en la plantilla, en un elemento dHTML de la sidear o en un post.

No es algo universal, este tipo de ventanas depende mucho de las propiedades del sitio donde se van a poner. No es el mejor método. Recomendaría que también veas esta entrada.

Responder
Quinøff  

Tengo dudas de primerizo, y te las planteo:

1. ¿Dónde incluyo las definiciones CSS? Quise hacerlo en la plantilla antes de /head y me salió mal.

2. 'nombreContenedor' y 'nombreContenido' ¿a qué se refieren? Pues supongo que no equivalen al nombre del archivo y de la entrada donde va incluido.

3. los enlaces ABRIR y CERRAR, ¿con qué enlazan?

4. Quizás con un ejemplo (demo) quede más claro.

Disculpa estas preguntas que parecerán obviedades, pero no he podido resolverlas. Desde ya muchas gracias!

Joaquín

Responder
JMiur  

El CSS puede incluirse antes de </b:skin> o bien, antes de </head> pero, debe colocarse entre etiquetas style, así:

<style>
... y aqui colocas el CSS ...
</style>

nombreContenedor y nombreContenido son los valores de los atributos ID. Eso, sirve para identificar una etiqueta específica, es, como darle un nombre y puede ser cualquiera,sólo hay que tener la precausión de usar siempre nombres distintos, no pueden tener espacios y son sencibleas al uso de mayúsuculas y minúsculas: puede llamarse miventana estaventana cualquier texto es válido.

En el ejemplo, ENLACE ABRIR y ENLACE CERRAR son los textos visibles de los enlaces, puede ser cualquier otro texto o imágenes. Esos enlaces lo que hacen es ejecutar las funciones del script.

No es posible poner un demo porque sería muy complicado de mostrar en una entrada. Sólo se trata de una demostración bastante elemental del uso de ese tipo de ventanas y está pensado como una simple forma de investigar el tema.

Responder
Quinøff  

Se agradece, Maestro. Me queda súper claro. Reitero que este sitio tuyo es una panacea.

Responder
JMiur  

Jajajajajaja. Una exageración pero, igual se agradece el comentario :D

Responder
mr bardo  

Muy bueno el ejemplo, ahora tengo una duda.

Implemente la ventana modal perfectamente, adentro de ella incorpore un formulario en javascrip para mandar mails. El formulario anda perfecto pero cuando mando el mail me cierra automaticamente la ventana modal y si vuelvo a abrirla me aparece el mensaje "mail mandado con exito".

Como puedo hacer para que no se cierre la ventana cuando mando el mail?

Responder
JMiur  

No sabría decirte cómo podrías hacer eso.

Responder
chaludesign  

Hola! mira tengo un problema...

Yo coloco el "nombre del Contenedor"
y cambio el nombre del "contenido" porque tengo vdiferentes botones con un lightbox cada uno...
Pero al colocar la href al segundo lightbox cambiandole el Id de contenido, no me responde y me muestra siempre el primero..
Que estoy haciendo mal?


Gracias.

JMiur  

SIn ver tu ejemplo, no podría decírtelo.

Responder
Sergio  

Me ha servido bastante para mi página web Gracias de verdad.

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