Background para popup que bloquee el contenido de la página

joseibarz · #1 (**permalink**) 21/01/2010, 08:49

Buenas tardes,

Estoy intentando mostrar un popup y que un background semitransparente me bloquee la página entera.

Tengo uno background definido tal que:

Código CSS:

Ver original#backgroundFilter
{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #000;
    filter: alpha(opacity=60);
    opacity: 0.5;
    display: none;
    z-index: 1000;
    width: 100%;
    height: 100%;
}

Cuando muestro el popup y a su vez el background, solamente me muestra el background, en la primera parte de la pàgina, digamos los primeros 800px. Si hago scroll con el ratón tengo el resto de página sin bloquear.

Veis algo mal en estas propiedades? O si sabeis alguna otra manera de conseguirlo será bienvenida.

Gracias.

Impostor · #2 (**permalink**) 21/01/2010, 09:01

Habría que analizar la capa que contiene a #backgroundFilter, ya que según las propiedades aplicadas

Código HTML:

width: 100%;
height: 100%;

Estas estableciendo que ocupe un 100% de la capa contenedora, y si esta solo midiese 10px, eso es lo que ocuparía.

No se se he logrado explicarme.

Saludos¡¡

joseibarz · #3 (**permalink**) 21/01/2010, 09:33

Tienes razón, no había caído.

De todas formas, lo he puesto en el <body> directamente, para ahorrarme futuros problemas (no tengo el body formateado con CSS).

Firebug me devuelve esto en tiempo de ejecución:

Código CSS:

Ver originalelement.style {
display:block;
}
#backgroundFilter {
background-color:#000000;
display:none;
height:100%;
left:0;
margin:0;
opacity:0.5;
overflow:hidden;
padding:0;
position:absolute;
top:0;
width:100%;
z-index:1000;
}

Se me sigue viendo igual :(

Gracias.

Jask · #4 (**permalink**) 21/01/2010, 10:07

Cita:

Iniciado por joseibarz

Tienes razón, no había caído.

De todas formas, lo he puesto en el <body> directamente, para ahorrarme futuros problemas (no tengo el body formateado con CSS).

Firebug me devuelve esto en tiempo de ejecución:

Código CSS:

Ver originalelement.style {
display:block;
}
#backgroundFilter {
background-color:#000000;
display:none;
height:100%;
left:0;
margin:0;
opacity:0.5;
overflow:hidden;
padding:0;
position:absolute;
top:0;
width:100%;
z-index:1000;
}

Se me sigue viendo igual :(

Gracias.

Si firebug te devuelve eso es porque te está tomando esos valores.
Te recomendaría que lo pongás en un .css externo y vallás modificando.
Revisá el HTML lo mismo hay algún error o no cerraste bien algún comando ;)

Saludos y suerte

Tecna · #5 (**permalink**) 21/01/2010, 14:54

Buenas,

según la especificación CSS 2.1 una altura en porcentaje de un elemento raíz es relativa al acceso visual, es decir a la ventana o area de visualización y cada navegador puede elegir como tratar el documento cuando se redimensiona el area visual.

En otros elementos la forma de computar la altura también depende de si son en bloque, reemplazados, si se ha especificado o no valor para la propiedad, de su posición, en fin que es bastante complejo. Cuando se especifica un porcentaje se calcula con respecto a la caja de contención de dicho elemento, pero a veces aunque se declare un porcentaje la altura computada puede ser interpretada como auto, dependiendo de si el bloque de contención tiene o no altura especificada o si el elemento está posicionado absolutamente.

Si no se declara un DTD en algunos navegadores el comportamiento sería el que buscas pero no es recomendable quitar el DTD y además siempre dependera del navegador.

A lo mejor combinando con la propiedad position: fixed o con overflow: hidden para que oculte el scroll temporalmente conseguirías algo pero tampoco me parece buena solución... También hay muchos navegadores que bloquean los popup y entonces la pagina se te quedaria bloqueada.

joseibarz · #6 (**permalink**) 22/01/2010, 02:34

Muchas gracias a los dos!

Tenías razón Tecna, cambiando position:absolute por position:fixed simplemente, se ha arreglado.

El problema que me surge ahora es el de muchos... IE6.

En esta versión del navegador solamente me muestra la capa al final de la página con una altura de unos 10-20px.

Como puedo solucionarlo aquí?

Cita:

A lo mejor combinando con la propiedad position: fixed o con overflow: hidden para que oculte el scroll temporalmente conseguirías algo pero tampoco me parece buena solución... También hay muchos navegadores que bloquean los popup y entonces la pagina se te quedaria bloqueada.

Perdón, se me olvidó aclarar que el popup que abro es en javascript, interno de la página. Y como tengo eventos mouseover y demás, gana más importancia tener el background bloqueante.

Saludos.