Ventana modal

Las ventanas modales son aquellas en las que el control o foco sobre la ventana que la
abre se bloquea hasta que el usuario realice alguna accin sobre la ventana abierta. Son
muy utilizadas en aplicaciones web, donde su principal utilidad radica en el inicio de
sesin, o para confirmar la ejecucin de alguna tarea (Eliminar un registro o una
cuenta,etc).

Como Funciona
La mayora de los desarrollos para ventanas modales, constan de 2 principales
elementos:

Una capa que recubra toda nuestra pgina.

Una capa sobre la anterior que muestre la ventana modal

La capa que recubrir nuestra pgina servir de manto que no permitir que se
realicen acciones sobre lo que estamos recubriendo, esto es lo que le da el significado
de modal a la ventana modal. Generalmente la hacemos de un color ms oscuro para dar
la impresin de que lo recubierto ha perdido el foco. En principio debe estar oculta o
con un gradiente alfa en 0.
La capa que nos mostrar la ventana modal y la informacin que esta contiene es la
segunda capa y en principio debe estar oculta. Debemos tambin proporcionar alguna
interfaz (botn, enlace, etc) que nos permita salir de dicha ventana y volver a la
principal. Empecemos por el Javascript.
Javascript
function toogle(a,b,c)
{
document.getElementById(b).style.display=a;
document.getElementById(c).style.display=a;
}
Esta funcin nos mostrar (o no) ambas capas, funciona pasando el tipo de display
(atributo que nos muestra o no un elemento en CSS), y los nombres de los ID de las
capas tanto la del fondo como la de la ventana.
CSS
#modal
{
position: absolute;
padding: 0;
margin: 0;
width: 100%;

height: 100%;
z-index: 50;
filter: alpha(opacity=50);
opacity: 0.8;
-moz-opacity:0.8;
-webkit-opacity:0.8;
-o-opacity:0.8;
-ms-opacity:0.8;
background-color: #808080;
left: 0;
top: 0;
overflow: auto;
}
.contenedor
{
width: 500px;
background: #fff;
position: relative;
margin: 10% auto;
padding: 30px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-gradient(linear, right bottom, right top, color-stop(1,
rgb(255,255,255)), color-stop(0.57,
rgb(230,230,230)));
text-shadow: 0 1px 0 #fff;
}
.contenedor h2 {
font-size: 36px;
padding: 0 0 20px;
}
.contenedor a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
}
.contenedor a[href="#close"]:focus {
outline: none;
}
.contenedor a[href="#close"]:after {
content: 'X';

display: block;
position: absolute;
right: -10px;
top: -10px;
width: 1.5em;
padding: 1px 1px 1px 2px;
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #fff;
border: 3px solid #fff;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.contenedor a[href="#close"]:focus:after,
.contenedor a[href="#close"]:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}
Justo definimos 2 estilos #modal y .contenedor. El primero se aplicar al elemento con
Id modal y ser nuestro fondo que evitar acciones fuera de la ventana modal. El
segundo se aplicar a una capa en la cual definimos sub-estilos para dar diseo a un
ttulo, un texto y un enlace que nos permita cerrar dicha ventana modal y volver a la
ventana principal.

HTML
Ads by InfoAd Options

<a href="#" onclick="toogle('block','modal','ventana')">Abrir Modal</a>

<div id="modal" style="display:none">
<div id="ventana" class="contenedor" style="display:none">
<h2>Titulo</h2> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua."
<a href="#close" title="Cerrar" onclick="toogle('none','modal','ventana')"
>Close</a>
</div>
</div>
!