Ventanas de Espera

Question

¡Ayuda!

Hola a todos, necesitaría saber como implementar una ventana de espera. Me explico, lo que me gustaría es que mientras se esté ejecutando un método que dura bastante, aparezca en pantalla una ventana indicando que el usuario debe esperar.

Muchas gracias.

Answer 1

Buenas!

Si todo los campos del formulario están contenidos en una capa puedes hacer que al pulsar el botón dicha capa se oculte por javascript (document.getElmentById("idCapa").style.visibility="hidden") y mostrar una capa que esté posicionada de forma absoluta, cuando el metodo diga que ha finalizado ocultas lo de cargando y muestras todo el formulario (document.getElmentById("idCapa").style.visibility="visible"). La imagen la puedes crear en www.ajaxload.info y para hacer la capa de cargando aparezca semitransparante hay que usar propiedades css que no me la se de memoria del tipo opacity (google es tu amigo, aprovéchate de él).

Un saludo

Answer 2

Te paso el código de una típica ventana de "Cargando" que tengo en una aplicación, por si te sirve...

Este es el código que tengo en mi página, la funcíon javascript se llama desde el botón que realiza la acción:

<script type="text/javascript">
<!--
function ajaxComprobacion()
{
    document.getElementById("capa_cargando").style.visibility="visible";
    document.getElementById("imagendiv").style.visibility="visible";
}
//-->
</script>

<div id="capa_cargando" class="clase_cargando">
</div>
<div id="imagendiv"class="imagen">
</div>
Estas son las clases css:

<pre lang='css'>/****** peticionesAjax Ventana transparente ********/
    .clase_cargando {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        z-index: 1000;
        visibility:hidden;
        background: #000000;
        z-index: 1000;
        opacity: .10;
        -moz-opacity: 0.10;
        filter: alpha(opacity = 10);
    }
    .imagen {
        position:absolute;
        visibility:hidden;
        display: block;
        top: 40%;
        left: 45%;
        width: 128px;
        height: 128px;
        background-image: url(../images/loading.gif);
        background-repeat: no-repeat;
        text-align:center;
        z-index: 1001;
    }
Y por último necesitarías una imagen, puede hacerte una en la página que te menciono arriba.

Un saludo.