Foros del Web » Creando para Internet » CSS »

Popup con CSS DIV

Estas en el tema de Popup con CSS DIV en el foro de CSS en Foros del Web. Hola, queria saber como puedo hacer un popup en css que aparesca cuando se cree la pagina y que siga el scroll, no recuerdo bien ...
  #1 (permalink)  
Antiguo 22/10/2008, 11:44
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 11 años, 1 mes
Puntos: 0
Popup con CSS DIV

Hola, queria saber como puedo hacer un popup en css que aparesca cuando se cree la pagina y que siga el scroll, no recuerdo bien como se hacia, era con div style position absolute, quiero hacer un popup como el que aparece en la pagina www.warianos.org/foros/index.php la que pide que te registres. Busque y busque y nada de nada, gracias por su ayuda
  #2 (permalink)  
Antiguo 22/10/2008, 12:00
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Popup con CSS DIV

Seguro. Aquí te dejo como hacer un Div siempre en el centro:

http://mx.geocities.com/daphyreweb/w...div-fixed.html

Y aquí como hacer que se abra y se cierre con JS:

http://mx.geocities.com/daphyreweb/w...iv-pop-up.html
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 22/10/2008, 15:36
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 11 años, 1 mes
Puntos: 0
De acuerdo Respuesta: Popup con CSS DIV

Muchas gracias, justo lo que busque y busque :P, primero hay que buscar, pero aveces se tarda mucho jajajjjaja

Respuesta super veloz, gracias, saludos
  #4 (permalink)  
Antiguo 23/10/2008, 07:34
 
Fecha de Ingreso: noviembre-2006
Mensajes: 25
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Popup con CSS DIV

Hola de nuevo, el ejemplo anterior esta muy bueno, pero no funciona en Internet Explorer :(, alguien sabe como solucionarlo?, gracias
  #5 (permalink)  
Antiguo 23/10/2008, 08:39
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Popup con CSS DIV

Mira si este ejemplo de Mikmoro: Posición fija para IE6 (fixed) es de ayuda.
Si miras el código css verás que tiene las propiedades siguientes:
Cita:
#fijo {
background:#CCFFFF none repeat scroll 0 0;
border:1px solid #000000;
height:200px;
left:50%;
margin-left:-100px;
margin-top:-100px;
position:absolute;
top:50%;
width:200px;
}
Claro está, que ese div va a estar siempre visible, no hay posibilidad de cerrarlo (bueno, sí. Con firefox y firebug eliminas el elemento jeje)

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 23/10/2008, 20:08
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Popup con CSS DIV

una pregunta kseso?, cual es la diferencia entre este y el mío, que no la noto.

@sonjeux, ¿Usase el hack que puse para IE dentro del código?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #7 (permalink)  
Antiguo 24/10/2008, 06:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Popup con CSS DIV

Pues varias cosas:

1.- Al tenerlo en UTF-8, comienzas el documento con la cabecera de declaración de xml:

<?xml version="1.0" encoding="utf-8" ?>

lo que hace que no funcione en IE6

2.- Hay un pequeño error en el cierre del comentario condicional, que lo tienes como:

<![end if]-->, y debe ser <![endif]-->, lo que hace que se te vea en pantalla un <![end if]--> en texto arriba del todo.

3.- Como muestro en mi código, no es necesario usar el comentario condicional para nada, ya que lo que incluyes ahí no afecta al resto de navegadores, pudiendo así usar una forma compatible con todos en lugar de una para IE y otra para el resto.

Básicamente esas son las diferencias principales (creo).
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 24/10/2008, 07:39
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Popup con CSS DIV

Cita:
Iniciado por daPhyre Ver Mensaje
una pregunta kseso?, cual es la diferencia entre este y el mío, que no la noto.

@sonjeux, ¿Usase el hack que puse para IE dentro del código?
Hola DaPhyre.
Lo cierto es que no seguí tus enlaces. Al leer la respuesta de que no funcionaba, recordé que Mikmoro tenía algo que pudiese serle de utilidad y así se lo indiqué.

De todas formas, todos hemos salimos ganando con la "duplicidad" de mi respuesta.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 24/10/2008, 10:07
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Popup con CSS DIV

Cita:
Iniciado por Mikmoro Ver Mensaje
1.- Al tenerlo en UTF-8, comienzas el documento con la cabecera de declaración de xml:

<?xml version="1.0" encoding="utf-8" ?>

lo que hace que no funcione en IE6
¿¡IE6 no reconoce UTF-8!? ¿¡Por qué nadie me había dicho antes!? ... Ahora tendré que modificar toda mi página web

Cita:
Iniciado por Mikmoro Ver Mensaje
2.- Hay un pequeño error en el cierre del comentario condicional, que lo tienes como:

<![end if]-->, y debe ser <![endif]-->, lo que hace que se te vea en pantalla un <![end if]--> en texto arriba del todo.
No había reparado en ello. Estaba seguro que funcionaba así... ¡En tal caso, debo corregirlo inmediatamente! (Lo malo de ya no tener IE en casa, y no revisarlo cuando hay oportunidad )

Cita:
Iniciado por Mikmoro Ver Mensaje
3.- Como muestro en mi código, no es necesario usar el comentario condicional para nada, ya que lo que incluyes ahí no afecta al resto de navegadores, pudiendo así usar una forma compatible con todos en lugar de una para IE y otra para el resto.
Anteriormente yo tenía el código exactamente igual que tú, pero me he llevado una desagradable sorpresa: Google Chrome no lo deja fijo de esta forma ...

Es por eso que ahora a fuerza debe ser usado de la forma que he hecho yo, haciéndolo de la forma correcta como original, y creando el hack para IE (Además de ser más correcto el código original para los no IE ).

Bueno, después de todo, todos hemos logrado aprender algo de esto
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #10 (permalink)  
Antiguo 24/10/2008, 10:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Popup con CSS DIV

Cita:
Iniciado por daPhyre Ver Mensaje
¿¡IE6 no reconoce UTF-8!? ¿¡Por qué nadie me había dicho antes!? ... Ahora tendré que modificar toda mi página web
No, no es que no lo reconozca, es que cuando el archivo empieza por la cabecera de declaración de xml IE6 presenta problemas, como este por ejemplo, al no encontrar lo primero de todo el doctype (es que IE6 es gilipollas, aunque vamos, que no descubro nada con eso).

Cita:
Iniciado por daPhyre Ver Mensaje
Anteriormente yo tenía el código exactamente igual que tú, pero me he llevado una desagradable sorpresa: Google Chrome no lo deja fijo de esta forma ...
Ah, pues no tenía ni idea de eso. No, si al final voy a tener que poner el maldito chrome para probar las cosas. Pero... ¿para qué demonios lo usa la gente si es un beta? ¿no tienen bastante con los navegadores que van bien? (además de haber leido que no parece aportar nada especial)

Cuando pueda lo compruebo, porque se me hace muy raro que de la forma original no funcione con el chrome, ya que el concepto es bastante lógico y sencillo.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 24/10/2008, 10:54
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Popup con CSS DIV

Cita:
Iniciado por Mikmoro Ver Mensaje
No, no es que no lo reconozca, es que cuando el archivo empieza por la cabecera de declaración de xml IE6 presenta problemas, como este por ejemplo, al no encontrar lo primero de todo el doctype (es que IE6 es gilipollas, aunque vamos, que no descubro nada con eso).
¿Entonces tendré que eliminar los xml de entrada de toda mi página? Por algo ya está descontinuado, lástima que la gente que no lo ha actualizado no lo sepa


Cita:
Iniciado por Mikmoro Ver Mensaje
Ah, pues no tenía ni idea de eso. No, si al final voy a tener que poner el maldito chrome para probar las cosas. Pero... ¿para qué demonios lo usa la gente si es un beta? ¿no tienen bastante con los navegadores que van bien? (además de haber leido que no parece aportar nada especial)

Cuando pueda lo compruebo, porque se me hace muy raro que de la forma original no funcione con el chrome, ya que el concepto es bastante lógico y sencillo.
El original si funciona (Position:fixed), el problema es que a diferencia de de los otros navegadores, no reconoce los malabares que hemos hecho con IE ... Igual no veo por qué debería, ya que no es la forma correcta. Cuando deje de ser beta dudo que comience a hacerle caso
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #12 (permalink)  
Antiguo 24/10/2008, 10:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Popup con CSS DIV

Bueno, ya está. He hecho una pequeña modificación en el archivo y ya funciona en Chrome, IE6 y 7, Opera, etc.

Cita:
* {margin:0; padding:0;}
html, body {width:100%;
height:100%;
overflow:hidden;
}
#contenido {width:100%;
height:100%;
overflow: auto;
}
#fijo {
position:absolute;
width:200px;
height:200px;
border:1px solid #000;
background:#cff;
left:50%;
margin-left:-100px;
top:50%;
margin-top:-100px;
}
y en el html añadir

<div id="contenido">
<p>Texto texto....
...
</div>

__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 24/10/2008, 11:09
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Popup con CSS DIV

Excelente

Solo no olvides cambiar los datos en tu página para los futuros clientes que enviemos
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #14 (permalink)  
Antiguo 24/10/2008, 11:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Popup con CSS DIV

Actualizada:

http://www.araudi.net/ejemplos/IE6fixed.html

(maldito Chrome... creo que le voy a empezar a coger manía )
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 24/10/2008, 12:00
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Popup con CSS DIV

Cita:
Iniciado por Mikmoro Ver Mensaje
(maldito Chrome... creo que le voy a empezar a coger manía )
Pero hasta el momento ha sido lo único que he visto que hace distinto. Por lo que he visto respeta bien todos los estándares básicos de CSS (a diferencia de IE), así que solo hay que preocuparnos por lo que hagamos "para que IE lo lea bien"
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:28.