Usando CSS se puede dar un nivel de profundidad a las capas. ¡¡¡Esto es lo que he hecho!!! He aplicado el atributo z-index para colocar capas encima de otras. La capa que tenga un mayor valor numérico para el atributo z-index, es la que se verá más por encima de todas y las demás quedarán por debajo de acuerdo al atributo z-index. Para el ejemplo de este artículo, el cuerpo principal de la página tiene un z-index = 1, mientras que las capas llamadas capaFondo1, capaFondo2 y capaFondo3 les he asignado un valor de 2. A la capa capaVentana le he asignado 3 porque es la que quiero que quede por encima de todas las demás. Como dije anteriormente, todas las capas inicialmente están oculta (se utiliza el atributo visibility con el valor hidden) y la idea es aplicar JavaScript para mostrar dichas capas.
En las 3 capas centrales (capaFondo1, ...ondo3), es donde radica el truco de que el cuerpo principal de la ventana quede desactivado cuando se muestre la ventana emergente. Utilizando CSS hago que estas capas tengan el máximo ancho (width) que puedan tener y un largo (heigth) que he puesto a mi conveniencia, de modo que cubren todo el cuerpo principal. Las capas centrales se diferencian por las imágenes que en ellas se muestran. Todas tienen imágenes transparente con opacidades de 40%, 50% y 60% y diferentes filtros de transparencia. Al usar imágenes con tendencia (opacidad) al transparente sobre el fondo de la capa, la capa permite que se vea lo que hay por debajo de ella, en este caso, el cuerpo principal de la página. Es importante destacar, que si colocan una imagen 100% transparente será equivalente a no colocar imagen, y el fondo se verá normal. La idea es colocar una imagen que no sea totalmente transparente, de modo que se vea el color de la imagen y lograr así que el fondo parezca inactivo.
Hay 2 funciones JavaScript, las cuales muestran y ocultan las capas. El código de la función que muestra las capas es el siguiente:
function abrirVentana(ventana)
{
if (ventana=="1")
{
document.getElementById("capaFondo1").style.visibility="visible";
document.getElementById("capaFondo2").style.visibility="hidden";
document.getElementById("capaFondo3").style.visibility="hidden";
}
else if (ventana=="2")
{
document.getElementById("capaFondo1").style.visibility="hidden";
document.getElementById("capaFondo2").style.visibility="visible";
document.getElementById("capaFondo3").style.visibility="hidden";
}
else
{
document.getElementById("capaFondo1").style.visibility="hidden";
document.getElementById("capaFondo2").style.visibility="hidden";
document.getElementById("capaFondo3").style.visibility="visible";
}
document.getElementById("capaVentana").style.visibility="visible";
document.formulario.bAceptar.focus();
}
Esta es la función que se ejecuta cada vez que se hace clic en cualquiera de los 3 enlaces. Al hacer clic en el enlace ubicado en el 1er párrafo, éste hace un llamado a la función y le pasa como parámetro el número uno (1), el cual indica el número del párrafo. Al hacer clic en los otros dos enlaces, se pasará como parámetro 2 y 3 de acuerdo al párrafo. Dentro de la función se obtiene los estilos de cada capa y se utiliza la propiedad visibility para mostrar u ocultar según sea el caso. Dentro de esta función se le da el foco al botón Aceptar.
Una vez que se muestra la ventanita emergente, esta se puede quitar (ocultar) presionando sobre el botón Aceptar o sobre la X. Esto hará un llamado a la función JavaScript respectiva:
function cerrarVentana()
{
document.getElementById("capaFondo1").style.visibility="hidden";
document.getElementById("capaFondo2").style.visibility="hidden";
document.getElementById("capaFondo3").style.visibility="hidden";
document.getElementById("capaVentana").style.visibility="hidden";
document.formulario.bAceptar.blur();
}
Esta función se explica por sí misma. Oculta todas las capas y le quita el foco al botón Aceptar de la ventanita. Con esto finalizo la explicación del artículo. Espero le sirva y puedan aplicarlo en sus creaciones.
Autor: José Antonio Jiménez Garelli
http://www.desadolloweb.com/articulos/efecto-habilitar-fondo-javascript.html
Usuarios que han visto este tema también han visto...
- Detectar el idioma y país del usuario con Javascript
- Efectos Rollover
- Formulario que multiplica números en JavaScript
- El for en JavaScript
- Manejadores de eventos en JavaScript
- Versión imprimible de este documento
- Enviar por e-mail este documento
