Pop-up (ventana emergente) con CSS automático

diepdraco · #1 (**permalink**) 04/04/2013, 18:58

Hola ya busque en la red pero no lo encuentro tampoco en el foro, lo que necesito es un ejemplo de una ventana emergente o pop-up pero hecho con CSS y ademas que sea automático.

Encontre este ejemplo:

http://tympanus.net/codrops/2009/12/...slide-out-box/

pero como verán hasta que le das clic a la imagen de la esquina funciona el pop, aunque no sea como ese, cualquier ejemplo sencillo, solo requiero cargar un imagen y es todo, espero que me puedan ayudar!

Saludos

Carlangueitor · #2 (**permalink**) 04/04/2013, 19:20

Pues el link que pasaste tiene javascript, solo basta modificarlo un poco:

Código Javascript:

Ver original$(function() {
****$('#overlay').fadeIn('fast',function(){
************$('#box').animate({'top':'160px'},500);
****});
****$('#boxclose').click(function(){
********$('#box').animate({'top':'-200px'},500,function(){
************$('#overlay').fadeOut('fast');
********});
****});
});

moro666 · #3 (**permalink**) 05/04/2013, 04:27

Aun asi, si te interesa, se puede hacer completamente en css!

pzin · #4 (**permalink**) 05/04/2013, 05:18

Un pop-up no se puede hacer mediante CSS. Ni completa ni parcialmente.

Se puede imitar algo parecido, pero nunca será una ventana nueva independiente de la actual.

emprear · #5 (**permalink**) 05/04/2013, 08:51

Pop up 100% css
https://mdn.mozillademos.org/files/4607/lightbox.html
Si se quiere puede contener un iframe y con tenido externo.
Para abrirla automaticamente habría que utilizar la url mas el hash, y para eso debería valerte de javascript, consultá
http://www.forosdelweb.com/f13/recar...vacio-1045184/

Saludos

moro666 · #6 (**permalink**) 05/04/2013, 13:31

Con lo de que se te abra automaticamente, a que te refieres?

emprear · #7 (**permalink**) 05/04/2013, 13:43

Cita:

Iniciado por moro666

Con lo de que se te abra automaticamente, a que te refieres?

interpreto el automático de tu título como que ese popup se abre al abrir la página.
Saludos

moro666 · #8 (**permalink**) 06/04/2013, 09:17

Cita:

Iniciado por emprear

interpreto el automático de tu título como que ese popup se abre al abrir la página.
Saludos

A bien, pues si, si quieres si se puede hacer 100% en css, pero puede que fuera mejor idea poner algo de js, en fin, nose que es mejor....

emprear · #9 (**permalink**) 06/04/2013, 14:13

entonces lo primero sería no postear esto
Cita:

pero hecho con CSS y ademas que sea automático.

para evitarnos confusiones

pzin · #10 (**permalink**) 06/04/2013, 15:45

Yo sigo diciendo que eso no es un popup. Llámalo overlay o de alguna otra forma exótica, pero no popup.

O igual es que sigo con el concepto popero de hace una década.

emprear · #11 (**permalink**) 06/04/2013, 15:50

Cita:

Iniciado por pzin

Yo sigo diciendo que eso no es un popup. Llámalo overlay o de alguna otra forma exótica, pero no popup.

O igual es que sigo con el concepto popero de hace una década.

No es para ponerse tan nostalgioso, yo asociaba generalmente el popup al window open, pero para las nuevas generaciones, popup es cualquier cosa que salta arriba, hay que adaptarse

Saludos

pzin · #12 (**permalink**) 06/04/2013, 15:57

Cita:

Iniciado por emprear

No es para ponerse tan nostalgioso

Te quedó bien el eufemismo.

La verdad es que ya es raro ver un popup. Habrá que reordenar la ideología léxica.

RAC · #13 (**permalink**) 08/07/2013, 12:09

Cita:

Iniciado por pzin

Te quedó bien el eufemismo.

La verdad es que ya es raro ver un popup. Habrá que reordenar la ideología léxica.

He tenido la suerte de encontrar este post 11 años después... me ha dado mucha gracia porque en la empresa en la que trabajo, hace medio año seguían utilizando ventanas popup [con el concepto original] que abren automáticamente al llegar al home, media hora después de ver eso, encontré que en intranet seguían utilizando frames, una maravilla retro... cuando vi todo eso al entrar a la empresa, tuve sentimientos encontrados, una mezcla nostalgiosa, descepcionosa y enojosa... pero al fin, la sensación retro se apoderó de mi emocionalidad y me hizo sonreir recordando cuando visitaba desde entonces estos foros para compartir formas de evitar un scroll en algún frame, o para obtener la entonces maravillosa ventanita pupup para utilizarla con algún banner que algún cliente utilizaba para anunciar la promoción del mes con un estridente gif animado... maravilloso que este foro siga registrando la evolución de la web y que muestre que ha aportado gran valor a todos quienes hemos tenido la enorme suerte de llegar a su base de datos que, dicho sea de paso, merece una felicitación enorme desde el punto de vista del usuario, gran ejemplo para tantas empresas que, aún hoy, no entienden el valor de conservar el contacto con el usuario... ya ven... ya me puse nostalgioso ... un enorme abrazo a todos los que participan

pzin · #14 (**permalink**) 08/07/2013, 13:35

RAC en realidad... El tema este... Uhmm... Es de Abril.

Pero si. Por aquí hay tantas perlas o más como en tu empresa, aunque afortunadamente sólo son registros de un pasado cutre

donde a veces no habían otras formas.

RAC · #15 (**permalink**) 19/07/2013, 09:41

hahajaja... cierto, es de abril !!! hey ... entonces olvidemos la nostalgia jeje

supersiana · #16 (**permalink**) 21/07/2016, 14:36

Esto es de 2013 y ya se hablaba de estas cosas!
Gracias viejo! Este ejemplo con HTML y CSS limpito (sin nada de Javascript) me vino al pelo!
Además el código no tiene nada de rebuscado. Excelente!

Cita:

Iniciado por emprear

Pop up 100% css
[url]https://mdn.mozillademos.org/files/4607/lightbox.html[/url]
Si se quiere puede contener un iframe y con tenido externo.
Para abrirla automaticamente habría que utilizar la url mas el hash, y para eso debería valerte de javascript, consultá
[url]http://www.forosdelweb.com/f13/recargar-web-si-hash-vacio-1045184/[/url]

Saludos