Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Background para popup que bloquee el contenido de la página en el foro de CSS en Foros del Web. Buenas tardes, Estoy intentando mostrar un popup y que un background semitransparente me bloquee la página entera. Tengo uno background definido tal que: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); ...
  #1 (permalink)  
Antiguo 21/01/2010, 08:49
 
Fecha de Ingreso: marzo-2009
Mensajes: 76
Antigüedad: 15 años
Puntos: 0
Background para popup que bloquee el contenido de la página

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
  1. #backgroundFilter
  2. {
  3.     position: absolute;
  4.     top: 0;
  5.     left: 0;
  6.     overflow: hidden;
  7.     padding: 0;
  8.     margin: 0;
  9.     background-color: #000;
  10.     filter: alpha(opacity=60);
  11.     opacity: 0.5;
  12.     display: none;
  13.     z-index: 1000;
  14.     width: 100%;
  15.     height: 100%;
  16. }

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.
  #2 (permalink)  
Antiguo 21/01/2010, 09:01
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 15 años, 7 meses
Puntos: 20
Respuesta: Background para popup que bloquee el contenido de la página

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¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 21/01/2010, 09:33
 
Fecha de Ingreso: marzo-2009
Mensajes: 76
Antigüedad: 15 años
Puntos: 0
Respuesta: Background para popup que bloquee el contenido de la página

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 original
  1. element.style {
  2. display:block;
  3. }
  4. #backgroundFilter {
  5. background-color:#000000;
  6. display:none;
  7. height:100%;
  8. left:0;
  9. margin:0;
  10. opacity:0.5;
  11. overflow:hidden;
  12. padding:0;
  13. position:absolute;
  14. top:0;
  15. width:100%;
  16. z-index:1000;
  17. }

Se me sigue viendo igual :(

Gracias.
  #4 (permalink)  
Antiguo 21/01/2010, 10:07
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 773
Antigüedad: 17 años, 11 meses
Puntos: 15
Respuesta: Background para popup que bloquee el contenido de la página

Cita:
Iniciado por joseibarz Ver Mensaje
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 original
  1. element.style {
  2. display:block;
  3. }
  4. #backgroundFilter {
  5. background-color:#000000;
  6. display:none;
  7. height:100%;
  8. left:0;
  9. margin:0;
  10. opacity:0.5;
  11. overflow:hidden;
  12. padding:0;
  13. position:absolute;
  14. top:0;
  15. width:100%;
  16. z-index:1000;
  17. }

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
  #5 (permalink)  
Antiguo 21/01/2010, 14:54
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 2 meses
Puntos: 45
Respuesta: Background para popup que bloquee el contenido de la página

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.
  #6 (permalink)  
Antiguo 22/01/2010, 02:34
 
Fecha de Ingreso: marzo-2009
Mensajes: 76
Antigüedad: 15 años
Puntos: 0
Respuesta: Background para popup que bloquee el contenido de la página

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.

Etiquetas: contenido, popup, fondo
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 20:01.