Hoy os traigo un ejemplo de funcionalidad de JavaScript que nos puede ayudar en múltiples ocasiones, sobre todo cuando necesitamos un pop-up en nuestra web pero no queremos que sea ni un típico alert de JavaScript ni una nueva ventana de navegador, esto sería una capa flotante “Div” que puede contener un formulario para validaciones, pero lo que se necesita para esta funcionalidad es que cuando mostremos la capa el fondo se deshabilite para que el usuario no pueda interactuar con la página, simulando la funcionalidad de un alert de JavaScript o de un pop-up con una nueva ventana de navegador.
Es un ejemplo muy sencillo que prácticamente no tiene casi líneas de código, primero os muestro el HTML que he generado:
<a>Ejemplo de capa Emergente con fondo deshabilitado </a> <div id="capaVentana"><form name="formulario"> <fieldset class="fieldNoFlt"><label for="asuntoOcupacion"> <span class="labelUp2">Esto es una capa emergente con fondo deshabilitado</span> <textarea id="motivoEliminacion" cols="60" name="motivoEliminacion" rows="5"></textarea> </label></fieldset> <input id="cancelarSolicitud" class="inputBtn" name="cancelarSolicitud" type="submit" value="Cancelar" /> <input id="enviarSolicitud" class="inputBtn" name="enviarSolicitud" type="submit" value="Enviar" /> </form></div> <div id="capaFondo"></div> |
Como veréis es tan sencillo como crear un enlace para lanzar el evento de mostrar la ventana, luego dos capas, una para la ventana “capaVentana” y otra para el fondo “capaFondo” en mi caso en la ventana he añadido un formulario para que veáis que tiene múltiples usos.
Lo siguiente es añadir el código JavaScript:
function abrirVentana()
{
document.getElementById("capaFondo").style.visibility="visible";
document.getElementById("capaVentana").style.visibility="visible";
document.formulario.bAceptar.focus();
}
function cerrarVentana()
{
document.getElementById("capaFondo").style.visibility="hidden";
document.getElementById("capaVentana").style.visibility="hidden";
document.formulario.bAceptar.blur();
} |
Solo son dos funciones tan sencillas como una para abrir la ventana y otra para cerrarla que ocultan o muestran el contenido.
Y por último los estilos o CSS que serán los que den la funcionalidad de ocultar el contenido detrás de la capa principal:
#capaVentana {
visibility:hidden;
position:absolute;
padding:0px;
left:40%;
top:30%;
z-index:3;
background:#fff;
border:1px solid #000;
}
#capaFondo{
visibility:hidden;
position:absolute;
padding:0px;
left:0px;
top:0px;
right:0px;
bottom:0px;
background-image:url(trans02.gif);
background-repeat:repeat;
width:100%;
height:100%;
z-index:2;
}
form{
width:534px;
}
input{
float:right;
} |
Es un código muy sencillo, lo que hace es crear una capa de fondo que ocupe toda la pantalla con una imagen de background que se repita y superponer la capa del formulario, así el fondo queda deshabilitado y podemos interactuar con la capa flotante.
Os dejo un enlace del ejemplo para que veáis su funcionamiento, espero que os sirva de ayuda.
Ejemplo Capa Flotante Div con Fondo deshabilitado.