capa para inhabilitar no funciona para botones y links en IE

[ELL]

Hola a todos!

A ver si se os ocurre qué está pasando que google no me encuentra nada. Tengo una aplicación web que en un momento determinado lanza una ventana modal de confirmación. Esta "ventana" en realidad sólo es un pequeño div con visibilidad hidden que al pulsar un botón aceptar pongo a visible.

Mientras ese div está visible, no quiero que se pueda pinchar nada por debajo. Para ello, tengo una capa llamada inhabilitar,sin contenido, del tamaño de la página completa, también hidden por defecto y que la hago visible a la vez que el div de la ventana modal. La estructura es:

z-index div modal: 100
z-index div inhabilitar: 99
z-index resto html: no establecido

Con Firefox funciona correctamente. Es decir, la capa inhabilitar consigue que todo el fondo se vea pero no se pueda pinchar ni en botones, ni en links ni en cajas de texto. Sin embargo, Internet Explorer sólo deshabilita las entradas de texto, pero los links y los botones siguen pudiendo ser pulsados.

¿¿Alguna idea de porqué o de cómo solucionarlo?? Muchas gracias de antemano

[cpucpu]

postea el codigo, o por lo menos la porcions mas importante, lista para copiar y pegar enun html

[webosiris]

a ver que sucede si en la primera línea de tu css pones esto:

Código:

*{position:relative; z-index:1}

[ELL]

Ya probé esa línea en mi css pero no funciona. Ésto es lo más importante del css y la función javascript que se llama al pulsar el botón aceptar y que muestra la ventana modal:

body {
font-family: Verdana,Arial,Helvetica;
margin:0 0.8em 0 0.8em;
padding:0;
border:0;
background-color: #FFFFFF;
color: #000000;
font: 100%;
width: 97%;

}

#inhabilitar {
position:absolute;
top: 0;
left: 0;
visibility: hidden;
width:100%;
height:100%;
z-index:99;
border:1;
}

#modal {
display:block;
float:right;
position:absolute;
background: #ffffff;
width: 400;
height: 250;
top: 30%;
left: 30%;
margin: 0.2em 0.2em 0.2em 0.2em;
padding: 0.5em 0.5em 0.5em 0.5em;
color: #000000;
border: #000000 solid 0.2em;
visibility: hidden;
z-index: 100;

}

function mostrarModal() {

document.getElementById('modal').style.visibility= 'visible';
document.getElementById('inhabilitar').style.visib ility='visible';

//para inhabilitar los botones del formulario
Formulario = document.getElementsByTagName('form');
Botones = getElementsByClass('boton', Formulario[0], 'input');
for (i=0;i<Botones.length;i++){
Botones[i].disabled = 'true';
}

}

La segunda parte de la función mostrarModal es lo que he estado haciendo para solucionar parcialmente el problema en el explorer. Así al menos los botones se deshabilitan. También lo podría hacer para los links (ya lo probé), pero les cambia el formato y no nos gustaba. Además, sigo teniendo cajas de texto que no quiero que se puedan editar, y sólo podría deshabilitarlas una a una por su nombre. Esto ocurre porque si deshabilito todos los input en general, luego no me permite recuperar el valor de etiquetas de texto (que también son input), ya que una vez disabled, su valor al hacer get es "".

Lo que más me fastidia es que en el Firefox funciona perfectamente! Gracias por la posible solución propuesta.

[ELL]

Me respondo a mi misma, ya que lo conseguí solucionar:

Lo primero, conseguí que el IE inhabilitara el fondo por debajo del div modal colocando como background-image de la capa inhabilitar una imagen transparente. De esta manera, ya nada por debajo se podía pinchar. NO funcionó meter cualquier imagen y ponerla "transparent" en el CSS, parece que así no se deja engañar jeje

#inhabilitar {
position:absolute;
top: 0;
left: 0;
visibility: visible;
width:100%;
height:100%;
z-index:99;
border:1;
background-image: url("/img/transparente.gif");
background-repeat: repeat;
}

Mi segundo problema fue que IE no entiende los z-index de la misma manera(como bien empezasteis a sospechar). Hay muchas páginas que lo explican, la cuestión es que si quieres un elemento encima de otro en función del z-index en el Internet Explorer, lo mejor es que estén dentro del mismo contenedor, a la misma altura y cada uno con su z-index establecido. En mi caso tuve que llevar la ventana modal dentro del mismo contenedor donde está "todo lo demás", es decir, todo sobre lo que quería ponerme encima y quería dejar inhabilitado.

Una vez solucionado esto, descubrí que los select(los combo) ignoran el z-index en el Internet Explorer, y se colocan siempre por encima de TODO. Lo solucioné colocando un iFrame por encima de los combos. Esta solución está muy explicada por internet si buscáis algo tipo "IE bug z-index selects".

Y eso es todo, espero ahorrarle horas a alguien!!

Saludos a todos