oscurecer pagina mientras está en "Loading..."

[Greco2]

Hola, antes que todo les comento que estoy recien metiendome en esto de Ajax y es bastante poco lo que se, me he bajado el framework PROTOTYPE y estoy empesando recien.

En las FAQ del foro encontré la forma de mostrar la amosa imagen de "Loading..." en una esquina, lo que deseo es mostrar esa misma imagen pero centrada en la pantalla, supongo que eso lo tendré que hacer con css pero lo que necesito tambien es que cuando este visible la imagen "LOADING..." la pagina se "oscurezca" o bien se ponga mas "pálida", algo asi como el efecto de algunas paginas cuando muestran una ventana modal o algunas galerias de imagenes.

Si alguien me puede dar unas indicaciones de como realizarlo, si es que se puede solamente con PROTOTYPE o tendre que usar otros archivos mas.

Saludos

[Greco2]

ya pude solucionar parte dle problema, lo que pude hacer es mostrar un DIV centrado horizontal y verticalmente en la página, dicho div es el que muestra el gif que indica que se esta cargando, ahora lo unico que me falta es poder oscurecer la pagina mientras se esta haciendo la operacion.

Si alguien puede darme una pequeña ayuda o indicaciones ya que busque en internet y encontré un articulo que mostraba como hacerlo con PROTOTYPE (que tambien estoy usando) y con EFFECT.JS de SCRIPT.ACULO.US pero lamentablemente estaba incompleto.

Saludos.

PD. El codigo que ocupé para centrar el div horizontal y vertical es el siguiente:

.load{
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
overflow: none;
border: 0px solid;
display:none;
}

[MaBoRaK]

loading...................


Podemos hacer algo a la rápida.

Código PHP:

  var osc = document.createElement("div");
osc.style.position="absolute";
osc.style.filter="alpha(opacity=50)";
osc.style.opacity=0.5;
osc.style.width="100%";
osc.style.height="100%";
osc.style.display="none";
osc.innerHTML="<div style='text-align:center;'>Loading.....</div>";
document.body.appendChild(osc);
 
//ahora lo implementamos en tu ajax.
 
osc.style.display="";  //mostrará el loading
//aca creas tu objeto ajax, variables, etc etc
ajax.blablablabla
ajax.onreadystatechange=function()
{
  if(ajax.status==4)
 {
      osc.style.display="none";  
 }
}; 
   

Creo que con eso ya tienes una idea de como hacerlo. Espero te sirva.







connection closed.

[Greco2]

Muchas gracias por la ayuda, cualquier duda posteo aqui.

[ofnocron]

EN HEAD:

Código HTML:

<script language='JavaScript'>
function muestra_oculta(id){
if (document.getElementById){
var el = document.getElementById(id); 
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; 
}
}
window.onload = function(){
muestra_oculta('cargando');
}
</script> 

EN BODY:

Código HTML:

<div id='cargando' style='background:#4D5154;position: fixed;left: 43%;top: 200px;width: 235px;height: 17px;vertical-align:middle;text-align:center;margin-top: -25px;margin-left: -25px;overflow: none;border: 1px solid #212529;z-index:7777;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-khtml-border-radius: 3px;box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);'>
Cargando... espere por favor</div> 

DEMO:

Código HTML:

http://inpic.blogspot.com