Estoy tratando de usar CSS para crear un efecto 'gris' en mi página mientras se muestra un cuadro de carga en primer plano mientras la aplicación está funcionando. Lo he hecho creando un div negro translúcido de altura/ancho del 100% que tiene su visibilidad activada/desactivada mediante javascript. Pensé que esto sería lo suficientemente simple; sin embargo, cuando el contenido de la página se expande hasta el punto en que se desplaza la pantalla, desplazarse al pie de la página revela una parte que no está atenuada. En otras palabras, el 100% en la altura del div parece aplicarse al tamaño de la ventana del navegador, no al tamaño real de la página. ¿Cómo puedo expandir el div para que abarque todo el contenido de la página? Intenté usar JQuery .css ('height', '100%') antes de alternar su visibilidad, pero esto no cambia nada.¿Cómo hacer un div 100% de la altura de la página (no de la pantalla)?
Este es el CSS de la div en cuestión:
div.screenMask
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
Gracias.
¿funcionaría para desactivar la barra para desplazarse mientras se muestra que div gris translúcido? ¿Realmente quieres que los usuarios puedan desplazarse hacia abajo para ver algo con lo que no pueden hacer nada? – Adam