Superposición en IE 7 para evitar jugar con los controles en el fondo

Question

No tengo un único problema, pero para la vida de mí no puedo entender lo que estoy haciendo mal.

Tengo una página que tiene una serie de secciones.Parte de la sección es un poco la imagen.Cuando hace clic en la imagen, quiero mostrar un control personalizado.Mostrando el control es trivial, establecer el índice z un poco más para garantizar el control está por encima de todo.

Pero el usuario puede interactuar con las secciones detrás de la de control.

Para detener esto, he añadido una "manta".Básicamente un div que es el tamaño del documento con el siguiente CSS (en la sintaxis de jQuery) -

{
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: $(document).height(),
  display: 'none',
  zIndex: 1,
  backgroundColor: '#FF0000'
};

Sí...el fondo es de color rojo por lo que puedo ver para las pruebas.I definición de la opacidad a 0.1 (luz de desenfoque).Yo, a continuación, establezca el z-index de mi control personalizado a 2, de modo que es en la parte superior de la manta.

Esto funciona perfectamente en FireFox, Chrome y Safari, pero no en IE.

El control personalizado no es un hijo de la manta.

El objetivo es tener el siguiente documento cubiertos por una manta con el control en la parte superior de la manta para interactuar con él.Esto es lo que me pasa en todos los navegadores excepto internet explorer.En ie...va de documento con el control y ambos están cubiertos por la manta.

Respuesta

scunliffe era el más cercano (se contesta en un comentario que no se puede vincular a).El control personalizado está dentro de una posición relativa div (varios abajo, en realidad).la manta fue añadido simplemente en el extremo del cuerpo.Por lo tanto, estaba a las afueras de la posición relativa div y comenzó su propio índice z de la pila (como se documenta aquí).Desde IE 6/7 están rotos en este sentido, no importa lo que tengo el z-index, que siempre estaría por debajo de la manta.

Así que me mudé a la manta a ser el primer niño en el interior de la posición relativa div.Esto no es 100% completado todavía, porque si se desplaza (que no puedo parar con esta solución), la manta div sólo está a la altura de el contenido visible.Ahora tengo que averiguar cómo llegar a la altura completa del contenido (visibles y no visibles).

Answer 1

scunliffe era el más cercano (contestada en un comentario que no puedo enlazar a). El control personalizado está dentro de un div en posición relativa (varios abajo en realidad). la manta era simplemente añade en el extremo del cuerpo. Por lo tanto, estaba fuera de la div relativamente posicionado y comenzó el mismo de la pila propia z-index (tal como se documenta aquí ). Desde IE 6/7 se rompen en este sentido, no importa lo que se propuso el índice z a, sería siempre estar por debajo de la manta.

Así que se trasladó la manta a ser el primer hijo dentro del div en posición relativa. Esto no es 100% completo todavía, porque si se desplaza (que no puedo parar con esta solución), el div manta es más que la altura del contenido visible. Ahora tengo que encontrar la manera de obtener la altura completa del contenido (visible y no visible).

Answer 2

Que sea un hábito para incluir un mucho más alto índice z. Utiliza el siguiente:

z-index:20000;

Y, por supuesto, el índice z en el control personalizado. El alto índice z fijado mi problema similar.

Answer 3

he tenido problemas con esto también. La única manera que encontré crear un escudo no era penetrable para poner una imagen en el fondo de la DIV (un GIF transparente trabajó para mí). Y entonces usted todavía tiene que interceptar eventos de teclado para evitar la navegación con el control.

Answer 4

Aquí es cómo lo hacemos opacidad en nuestro proyecto:

.SomeStyle
{
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
}

que pone a prueba bien en IE 6 y 7 y FF 2 y 3. Creo que funciona en Safari también.

Answer 5

usted no menciona lo que el control personalizado consiste en eso si usted tiene un elemento de selección en el control personalizado entonces esto provoca problemas de modales en decir (no puedo recordar si se ha solucionado el problema en IE7). De todos modos esta información puede ayudar a resolver su problema. Usted necesitará una cuña de marco flotante para evitar que se muestra a través de la superposición. Un montón de guiones a punto de hacer esto para usted.

más información

y aquí

Answer 6

Sólo para tirar mi sombrero en ...

Sólo se aplicó este hace un rato y he utilizado:

div#shade-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
    filter: Alpha(opacity=70);
}

Es evidente que se podría cambiar o quitar el color de fondo. Yo estaba añadiendo este div a través del DOM Javascript, así que no tiene que preocuparse por el índice z.

sabe que funciona en FF y IE7.