div que cubra toda la ventana

molinillo · #1 (**permalink**) 09/06/2011, 03:59

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?

inieva · #2 (**permalink**) 09/06/2011, 06:19

Usa position:fixed; en lugar de absolute.

rossijona · #3 (**permalink**) 09/06/2011, 08:08

Cita:

Iniciado por inieva

Usa position:fixed; en lugar de absolute.

Fixed en I.E no funciona bien.

molinillo · #4 (**permalink**) 09/06/2011, 09:16

voy a probarlo y os comento, gracias!

molinillo · #5 (**permalink**) 09/06/2011, 09:28

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?

inieva · #6 (**permalink**) 09/06/2011, 10:08

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!

emprear · #7 (**permalink**) 09/06/2011, 11:33

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

molinillo · #8 (**permalink**) 10/06/2011, 02:13

gracias a todos amigos, voy a probar las dos soluciones y os comento como me ha ido.

emprear · #9 (**permalink**) 10/06/2011, 07:56

Revisa este código, debería funcionar

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div opaca 100% de la pantalla</title>
<style type="text/css">
/*<![CDATA[*/
div#opaca {
position: fixed;
width: 100%;
height:100%;
background-color: #000;
color: #FFF;
top:0px;
left:0px;
text-align: center;
padding-top: 200px;
z-index: 998;
overflow:hidden;
filter:alpha(opacity=95);
-moz-opacity:0.95;
-khtml-opacity:0.95;
opacity: 0.95;
font-size: 1.1em;
}
 
.prueba {
color: #FFF;
}
h1.atras {
margin-left: 300px;
margin-top: 300px;
font-size: 4em;
}
div#scroll{
width: 200px;
height: 1000px;
border: double 5px #000;
}
 
div#popup {
width: 500px;
height: 300px;
border: solid 2px #65B614;
margin: 0 auto;
z-index: 999;
position: relative;
}
/*]]>*/
</style>
</head>
<body>
<div id="opaca"><!-- capa pantalla completa -->
<div id="popup"><h1 class="prueba">Texto de Prueba<br />el popup</h1></div>
    
</div>
<h1 class="atras">Texto tras la capa</h1>
<div id="scroll">
Div de 1000 px de alto para generar scroll
</div>
</body>
</html>

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

Saludos

inieva · #10 (**permalink**) 10/06/2011, 09:01

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.

emprear · #11 (**permalink**) 10/06/2011, 10:29

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

inieva · #12 (**permalink**) 10/06/2011, 11:18

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.

inieva · #13 (**permalink**) 10/06/2011, 11:31

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.

emprear · #14 (**permalink**) 10/06/2011, 17:29

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

inieva · #15 (**permalink**) 11/06/2011, 07:33

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!