Foros del Web » Creando para Internet » CSS »

capa para inhabilitar no funciona para botones y links en IE

Estas en el tema de capa para inhabilitar no funciona para botones y links en IE en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/11/2007, 06:57
ELL
 
Fecha de Ingreso: noviembre-2007
Mensajes: 3
Antigüedad: 10 años, 1 mes
Puntos: 1
capa para inhabilitar no funciona para botones y links en IE

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
  #2 (permalink)  
Antiguo 06/11/2007, 15:28
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
Re: capa para inhabilitar no funciona para botones y links en IE

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

  #3 (permalink)  
Antiguo 06/11/2007, 18:43
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: capa para inhabilitar no funciona para botones y links en IE

a ver que sucede si en la primera línea de tu css pones esto:
Código:
*{position:relative; z-index:1}
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #4 (permalink)  
Antiguo 07/11/2007, 07:01
ELL
 
Fecha de Ingreso: noviembre-2007
Mensajes: 3
Antigüedad: 10 años, 1 mes
Puntos: 1
Re: capa para inhabilitar no funciona para botones y links en IE

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.
  #5 (permalink)  
Antiguo 12/11/2007, 06:35
ELL
 
Fecha de Ingreso: noviembre-2007
Mensajes: 3
Antigüedad: 10 años, 1 mes
Puntos: 1
Re: capa para inhabilitar no funciona para botones y links en IE

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
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 16:41.