Una ventana modal no es otra cosa que un contenedor HTML como cualquier otro que tiene una característica básica, permanecer oculta hasta que se hace click en algún botón. En principio, nada en particular y podrían diseñarse cientos de modelos gráficos pero digamos que lo más usual es que al abrirse, la pantalla se oscurece y sobre la página se muestra un elemento con cierto contenido que luego, podemos cerrar.
Buenos Aires
Argentina
Nacido en el tercer mundo. Un santo varón. Buenos Aires. Los elefantes. Las golondrinas de Plaza de Mayo. Me chupo el dedo.
El tiempo es veloz. ¿No ves que ya no somos chiquitos? Despedida de la infancia. Todo es efímero. Juguetes perdidos. Dime quién me lo robó. Aprendizaje.
Soy un hippie. Rutas argentinas. Sobredosis de TV. Raros peinados nuevos. Más de cien mentiras. Delirium tremens.
Ciudad de pobres corazones. El karma de vivir al sur. Mundo de quimeras. Oh Dios, ¿Qué puedo hacer?
Cuando era más joven. Los mayores del mundo. Botas locas. Rejas electrificadas. Cerca de la revolución. Contra todos los males de este mundo. La casa desaparecida. Tumbas de la gloria. Vencedores vencidos. Carguen, apunten, fuego. Estás frito angelito. A lo mejor aún te acuerdas.
Ah, te vi entre las luces. Muchacha. Amor se llama el juego. Juego de seducción. Mi genio amor. Prométeme que nunca me dirás adiós. Pequeñas delicias de la vida conyugal. Toda la vida tiene música hoy. Es hora de levantare, querido (dormiste bien?).
Resumiendo.
Mi sueño de hoy. La sed verdadera. La búsqueda de la estrella. Todos juntos. ¡Ah! Basta de pensar.
Esto es to-to-todo amigos.
| CONTRAER ARCHIVOS |
|
19 comentarios:
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!
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
Me resulta practica y simple , pero sigo prefiriendo lightWindow :)
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 :)
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)
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.
saludos amigos.
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.
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.
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.
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
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.
Se agradece, Maestro. Me queda súper claro. Reitero que este sitio tuyo es una panacea.
Jajajajajaja. Una exageración pero, igual se agradece el comentario :D
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?
No sabría decirte cómo podrías hacer eso.
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.
SIn ver tu ejemplo, no podría decírtelo.
Me ha servido bastante para mi página web Gracias de verdad.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...