Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/12/2012, 10:30
oscarbt
 
Fecha de Ingreso: abril-2009
Ubicación: Colombia
Mensajes: 949
Antigüedad: 15 años, 6 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