Foros del Web » Creando para Internet » CSS »

div que cubra toda la ventana

Estas en el tema de div que cubra toda la ventana en el foro de CSS en Foros del Web. Buenos dias, me explico, estoy unsando el awsomepopup, que es una libreria js al estilo de ligthbox. Para quienes no las conozcan, son librerias que ...
  #1 (permalink)  
Antiguo 09/06/2011, 03:59
 
Fecha de Ingreso: marzo-2010
Mensajes: 90
Antigüedad: 7 años
Puntos: 2
div que cubra toda la ventana

Buenos dias, me explico, estoy unsando el awsomepopup, que es una libreria js al estilo de ligthbox. Para quienes no las conozcan, son librerias que abren un popup encima de la pantalla cubriendo el resto de pantalla alrededor del popup con un fondo opaco gris.

El problema con awsomepopup es que el fondo gris sale siempre en la parte superior de la página, si el user hace scrolldown mientras se carga el popup ,el fondo gris queda arriba y no se ve. Se ve el popup, pero sin fondo gris opaco(pues este ha quedado escondido arriba)

he localizado esta linea que dibuja el div gris

Código HTML:
<div id="UpBck" style="position:absolute;width:'+ScreenWidth+';height:100%;top:0px;left:0px;background:#000000;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;"> 
Esa posición y ese top :0px me fuerzan el fondo gris arriba, como podria hacer para que el fondo gris se vea aunq haga scrolldown antes de la carga del popup?
  #2 (permalink)  
Antiguo 09/06/2011, 06:19
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 4 meses
Puntos: 18
Respuesta: div que cubra toda la ventana

Usa position:fixed; en lugar de absolute.
__________________
http://www.ignacionieva.com.ar
  #3 (permalink)  
Antiguo 09/06/2011, 08:08
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 6 años, 9 meses
Puntos: 5
Respuesta: div que cubra toda la ventana

Cita:
Iniciado por inieva Ver Mensaje
Usa position:fixed; en lugar de absolute.
Fixed en I.E no funciona bien.
  #4 (permalink)  
Antiguo 09/06/2011, 09:16
 
Fecha de Ingreso: marzo-2010
Mensajes: 90
Antigüedad: 7 años
Puntos: 2
Respuesta: div que cubra toda la ventana

voy a probarlo y os comento, gracias!
  #5 (permalink)  
Antiguo 09/06/2011, 09:28
 
Fecha de Ingreso: marzo-2010
Mensajes: 90
Antigüedad: 7 años
Puntos: 2
Respuesta: div que cubra toda la ventana

Teneis razón los dos, el fixed va de maravilla, pero en explorer ni siquiera muestra el div.

Alguna idea para que vaya en explorer?
  #6 (permalink)  
Antiguo 09/06/2011, 10:08
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 4 meses
Puntos: 18
Respuesta: div que cubra toda la ventana

Mis disculpas por la omisión del querido IE6. La solucion mas sencilla que te puedo dar es cargar la librería ie7-js que corrije el fixed entre otras cosas. Solo cargas la librería condicionalmente en el head y listo el position fixed ahí ta va a funcionar.

te dejo el link: http://code.google.com/p/ie7-js/

Saludos!
__________________
http://www.ignacionieva.com.ar
  #7 (permalink)  
Antiguo 09/06/2011, 11:33
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: div que cubra toda la ventana

Si tiene problemas con fixed en Explorer, la mejor guia (En inglés) la van a encontrar en

http://annevankesteren.nl/2004/07/fixed-positioning


Funciona perfectamente en IE6+

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 10/06/2011, 02:13
 
Fecha de Ingreso: marzo-2010
Mensajes: 90
Antigüedad: 7 años
Puntos: 2
Respuesta: div que cubra toda la ventana

gracias a todos amigos, voy a probar las dos soluciones y os comento como me ha ido.
  #9 (permalink)  
Antiguo 10/06/2011, 07:56
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: div que cubra toda la ventana

Revisa este código, debería funcionar

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Div opaca 100% de la pantalla</title>
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. div#opaca {
  9. position: fixed;
  10. width: 100%;
  11. height:100%;
  12. background-color: #000;
  13. color: #FFF;
  14. top:0px;
  15. left:0px;
  16. text-align: center;
  17. padding-top: 200px;
  18. z-index: 998;
  19. overflow:hidden;
  20. filter:alpha(opacity=95);
  21. -moz-opacity:0.95;
  22. -khtml-opacity:0.95;
  23. opacity: 0.95;
  24. font-size: 1.1em;
  25. }
  26.  
  27. .prueba {
  28. color: #FFF;
  29. }
  30. h1.atras {
  31. margin-left: 300px;
  32. margin-top: 300px;
  33. font-size: 4em;
  34. }
  35. div#scroll{
  36. width: 200px;
  37. height: 1000px;
  38. border: double 5px #000;
  39. }
  40.  
  41. div#popup {
  42. width: 500px;
  43. height: 300px;
  44. border: solid 2px #65B614;
  45. margin: 0 auto;
  46. z-index: 999;
  47. position: relative;
  48. }
  49. /*]]>*/
  50. </head>
  51. <div id="opaca"><!-- capa pantalla completa -->
  52. <div id="popup"><h1 class="prueba">Texto de Prueba<br />el popup</h1></div>
  53.    
  54. </div>
  55. <h1 class="atras">Texto tras la capa</h1>
  56. <div id="scroll">
  57. Div de 1000 px de alto para generar scroll
  58. </div>
  59. </body>
  60. </html>

Demo:
http://foros.emprear.com/css/capa_opaca.html


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 10/06/2011, 09:01
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 4 meses
Puntos: 18
Respuesta: div que cubra toda la ventana

Eh.... ese código que estas poniendo no aplica al problema de compatibilidad. Seguis haciendo uso del position:fixed.

Yo sigo que recomendando añadir la librería js. A diferencia la guia que propusiste anteriormente y pese a que dicha solución utiliza únicamente css. Añadir la librería es mas sencillo, tiene otros beneficios incluidos y no requiere generar estructuras HTML innecesarias.
__________________
http://www.ignacionieva.com.ar

Última edición por inieva; 10/06/2011 a las 09:23
  #11 (permalink)  
Antiguo 10/06/2011, 10:29
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: div que cubra toda la ventana

inieva:

Lee con más atención, te estás yendo del tema

1. El problema de compatibilidad del fixed es solo para IE6

2. Ya indiqué una guia para la solución de ese problema
http://annevankesteren.nl/2004/07/fixed-positioning

3. El código que expuse funciona perfectamente en FF 3+, Opera 9+, Chrome, IE 7/8/9, Safari 4/5

4. Ese mismo código es solo un ejemplo del uso del Css, y tan solo eso, un ejemplo,
que nuestro amigo "molinillo" deberá adaptar.

5. Es obvio, que si "molinillo" está usando un clon de LightBox, obviamente esta usando Javascript, y necesitará del uso de las librerías apropiadas.

6. Me tome el trabajo de visitar, http://www.awesomepopup.com/test.html , la demo del lightbox que esta unado "molinillo", y funciona correctamente, salvo que en ese caso cualquier scroll que tenga la página de fondo, desaparece, pero de ninguna manera la capa "opaca" se "esconde arriba", como el sugiere, asi que de seguro algo está implementando mal

Saludos

__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #12 (permalink)  
Antiguo 10/06/2011, 11:18
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 4 meses
Puntos: 18
Respuesta: div que cubra toda la ventana

No tengo intenciones de ponerme a discutir demasiado pero el problema de molinillo se resuelve fácilmente con el position:fixed; como sugerí en mi primer mensaje. No había necesidad de ejemplificar códigos. Si es cierto como señalo rossijona que dicha propiedad no esta soportada en IE6. por lo cual ambos sugerimos una soluciones para implementar el fixed en IE6. (Sigue sin haber necesidad de ejemplificar)

Por otro lado si te tomaste el trabajo de visitar el sitio de la librería que esta usando molinillo, como yo lo hice ahora, deberías haber notado que la Liberia hace un document.body.style.overflow = "hidden"; por eso se elimina el scroll. Una tosca solución al problema del posicionamiento de la capa “opaca”(como vos decís) muy similar a la solución planteada en la guía que vos indicaste originalmente. Y si vos lees con atención molinillo dice que el problema se produce cuando se hace Scholl mientas la librería se ejecuta. (Probalo y vas a ver que es así) Por lo tanto lo el “de ninguna manera” junto a todo lo demás que escribiste esta de mas.

__________________
http://www.ignacionieva.com.ar
  #13 (permalink)  
Antiguo 10/06/2011, 11:31
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 4 meses
Puntos: 18
Respuesta: div que cubra toda la ventana

Ah… molinillo si seguís utilizando la librería awesomepopup te sugiero que elimines la linea 95 document.body.style.overflow = "hidden"; y la 111 document.body.style.overflow = "auto"; ya que con el position:fixed; serán innecesarias.
__________________
http://www.ignacionieva.com.ar
  #14 (permalink)  
Antiguo 10/06/2011, 17:29
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: div que cubra toda la ventana

Mostrar una capa opaca, con un popup, y necesitar del scroll para ver lo que esta atrás, un absurdo

Y si quiero poner ejemplos, los pongo

__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #15 (permalink)  
Antiguo 11/06/2011, 07:33
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 4 meses
Puntos: 18
Respuesta: div que cubra toda la ventana

Bueno. Bravo!!! Por fin una cosa en la que te puedo dar la razón!

Aconsejemos a nuestro amigo molinillo entonces, quien ya debe tener resuelto su problema desde el quinto mensaje, que haga caso omiso al resto.

Saludos!
__________________
http://www.ignacionieva.com.ar

Etiquetas: ventanas
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 23:26.