Hay ocasiones en las aplicaciones web que nos interesa bloquear la pantalla del navegador para impedir al usuario interactuar con la aplicación.
Un ejemplo es durante una llamada ajax que tarda un cierto tiempo y queremos mostrar el típico mensaje «loading» y poner el fondo con un tono oscuro, o para pedir nombre de usuario y contraseña.
Una solución simple para este problema consiste en poner un div que ocupe toda la pantalla y se sitúe por encima del resto de componentes. Así todos los clicks del ratón se realizarán sobre nuestro div en vez de sobre el botón que se ve debajo.
Después, mediante javascript muestras el div bloqueador. No te olvides de proporcionar alguna forma para quitar este elemento.
Estas propiedades del div se pueden especificar en una clase css
position: absolute;
top: 0px;
left: 0px;
height:100%;
width:100%; /* hacemos que ocupe toda la pantalla a cualquier resolución*/
z-index: 50; /* lo colocamos por encima del resto de componentes*/
background: url(b.png) repeat; /*Color de fondo semitransparente*/
}
Si queremos añadir algun mensaje o una ventana con la que se desee interactuar, solo tenemos que colocar un div que quede por encima del anterior.
z-index: 100; /* un z-index mayor al del blocker */
background-color: white; /* Un color de fondo para que se vea sobre la capa anterior*/
}
Ver ejemplo de bloqueo de pantalla
Si usas jQuery (o librerías similares) dispondrás de buenos plugins (como facebox) para hacer esto mismo con muchas mas opciones y efectos.
0 comentarios