Deshabilitar pagina (cargando)

JhonnyPienso · #1 (**permalink**) 03/07/2008, 09:27

Hola. He buscado con Google y en este buscador y no doy en el clavo para resolver un inconveniente que tengo.
Tengo todo resuelto con Ajax una funcion que hace que, cada vez que se envia una ejecucion con Ajax, se oscurece la pagina y sobrepone un div diciendo "Cargando...", hasta que termina la peticion y vuelve a la normalidad.
Mi inconveniente es que necesitaria que se deshabiliten todos los elementos de la pagina. Por que por mas que oscurezca y muestre un div en la mitad de la pantalla, el usuario puede seguir interactuando con los elementos que se ven. Por ejemplo, si la pagina es un formulario, y el usuario presiona en "Guardar", por más que se muestre la ventana "Cargando", el usuario puede seguir presionando los botones o cambiar los campos de texto.
Mi idea es que, despues de oscurecer la pagina, se deshabilite la pagina. Hasta donde yo se, lo unico que se me ocurre es hacer un bucle revisando uno por uno todos los elementos del formulario. Pero como se trata de una funcion donde a cualquier peticion Ajax se oscurece la pagina, no siempre va a ser un formulario.
Muchas gracias.

derkenuke · #2 (**permalink**) 03/07/2008, 19:26

Hola JhonnyPienso:

¿El DIV que se superpone es transparente? Si es opaco y no se ven los elementos de detrás, y si tiene z-index mayor que los demás elementos debería taparlos (con alto y ancho 100%, obviamente).

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>P&#225;gina nueva</title>
<style type="text/css">
body, html { width: 100%; height: 100%; }
#tapaTodo {
    position: absolute;
    top: 0; left: 0;
    width:100%;
    height: 100%;
    z-index: 100;
    background-color: black;
}
</style>
</head>

<body>

<a href="enlace.htm">enlace</a>
<input type="text" value="hola" />
<div id="tapaTodo">tapoTodo!</div>


</body>
</html>

Supongo que si es translúcido debería pasar lo mismo.

Un saludo.