Foros del Web » Creando para Internet » CSS »

Como posicionar un div centrado como ventan a modal

Estas en el tema de Como posicionar un div centrado como ventan a modal en el foro de CSS en Foros del Web. Hola a todos...tengo un problema al abrir un div que tiene estilo css y se abre como si fuera una ventana modal,, lo que sucede ...
  #1 (permalink)  
Antiguo 26/12/2012, 09:30
 
Fecha de Ingreso: abril-2009
Ubicación: Colombia
Mensajes: 949
Antigüedad: 9 años, 4 meses
Puntos: 27
Como posicionar un div centrado como ventan a modal

Hola a todos...tengo un problema al abrir un div que tiene estilo css
y se abre como si fuera una ventana modal,, lo que sucede es que cuando
tengo un enlace que lo abre y esta muy abajo de la ventana, el div siempre se abre en la parte superior...

El CSS es el siguiente:

Código CSS:
Ver original
  1. /* estilo para el div que se muestra una vez se abre la ventana modal */
  2.      .overlay{
  3.         display: none;
  4.         position: absolute;
  5.         top: 0;
  6.         left: 0;
  7.         width: 100%;
  8.         height: 100%;
  9.         background: #000;
  10.         z-index:1001;
  11.         opacity:.75;
  12.         -moz-opacity: 0.75;
  13.         filter: alpha(opacity=75);
  14.     }
  15.    
  16.     /* estilo para lo q este dentro de la ventana modal */
  17.     .modal {
  18.         display: none;
  19.         position: absolute;
  20.         top: 25%;
  21.         left: 25%;
  22.         width: 50%;
  23.         height: 50%;
  24.         padding: 16px;
  25.         background: #fff;
  26.         border: 5px groove #006600;
  27.         color: #333;
  28.         z-index:1002;
  29.         overflow: auto;
  30.        
  31.     }


y lo aplico asi:

Código HTML:
Ver original
  1. <!-- este es el div que funciona como ventana modal-->
  2. <div id="formularios" class="modal"></div>  
  3.  
  4. <!-- efecto de fondo de la pantalla-->
  5. <div id="fade" class="overlay" onclick = "document.getElementById('formularios').style.display='none';document.getElementById('fade').style.display='none'"></div>
  6.  
  7.  
  8. <!-- mostrando la ventana modal-->
  9.  
  10. <p><a href = "javascript:void(0)" onclick = "document.getElementById('formularios').style.display='block'; document.getElementById('fade').style.display='block';  " style="color: red; padding-left: 10px;">ENLACE</a> </p>

En el siguiente enlace se ve bien cual es mi problema....si se da clic en la palabra ENLACE 3, se puede detallar lo que yo estoy diciendo en este mensaje..
No se que propiedad css deba aplicar para que este div se abra bien en la parte central donde yo tenga el cursor...Agradezco me puedan colaborar.....Muchas gracias

https://dl.dropbox.com/u/9463718/ejemplo_error.htm
  #2 (permalink)  
Antiguo 26/12/2012, 11:29
Avatar de The_Code  
Fecha de Ingreso: mayo-2012
Ubicación: Argentina
Mensajes: 98
Antigüedad: 6 años, 4 meses
Puntos: 4
Respuesta: Como posicionar un div centrado como ventan a modal

margin:0 auto;
__________________
Mi portafolio
  #3 (permalink)  
Antiguo 26/12/2012, 11:35
 
Fecha de Ingreso: abril-2009
Ubicación: Colombia
Mensajes: 949
Antigüedad: 9 años, 4 meses
Puntos: 27
Respuesta: Como posicionar un div centrado como ventan a modal

He aplicado dicha propiedad y se sigue viendo igual....
  #4 (permalink)  
Antiguo 26/12/2012, 16:39
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 9 años, 2 meses
Puntos: 137
Respuesta: Como posicionar un div centrado como ventan a modal

oscarbt prueba cambiando el "position:absolute" por "position:fixed" tanto para ".overlay" como en ".modal" y nos comentas, un saludo
__________________
Temas para wordpress.
  #5 (permalink)  
Antiguo 27/12/2012, 05:43
 
Fecha de Ingreso: abril-2009
Ubicación: Colombia
Mensajes: 949
Antigüedad: 9 años, 4 meses
Puntos: 27
Respuesta: Como posicionar un div centrado como ventan a modal

sii, he cambiado a fixed y he solucionado mi problema !!...Muchas gracias alexk

Etiquetas: modal, fondo, centrar
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 00:01.