2011-06-05 26 views
8

Quiero mostrar una barra de progreso que "superpone" la página, deshabilitando otras acciones mientras se está ejecutando, como una especie de alerta (excepto que no se pudo salir haciendo clic en nada). ¿Cuál es una forma rápida de hacer esto en jQuery?Superposición barra de progreso con jQuery

Ya tengo la imagen elegida, una barra de progreso animado. Solo necesito una manera de superponerlo correctamente.

Respuesta

10

Puede implementar fácilmente su propia superposición.

#overlay { 
    background-color: black; 
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0; 
    opacity: 0.2; /* also -moz-opacity, etc. */ 
    z-index: 10; 
} 

A continuación, muestre <div id="overlay"><img src="/path/to/your/image"/></div> cuando se carga la página, o cada vez que desee que aparezca.

+0

¿Esto evitará que los usuarios hagan otras cosas mientras se muestran? – babonk

+1

Lo hará. Muestra un 'div' que cubre toda la página. Asegúrese de que no haya nada que quiera cubrir que tenga un 'z-index' más alto. Además, esto evitará que los usuarios hagan clic en los ítems cubiertos, no se puede usar como medida de seguridad. –

1

¿Has echado un vistazo a qTip? Esto es para lo que lo usamos.

3

Creo que la jQuery UI Modal es lo que estás buscando. Superpone el resto de la pantalla, hasta que un usuario cierra el diálogo. Puede agregar su barra de progreso dentro del cuadro de diálogo o agregar la jQuery UI progress bar también, si descubre que funciona mejor. Eso también tiene muchas opciones que puedes encontrar útiles.

Si desea que este sea realmente un tipo de diálogo "no se puede hacer nada hasta que esto acabe", entonces también puede sacar la "X" de cierre usando this solution.