CSSLab

Ventana modal sólo con CSS

A raíz de mi proyecto musical más reciente lanzado, incluyendo el sitio web donde me divertí mucho utilizando Mootools para sus diferentes funcionalidades, iré ampliando los artículos relacionados con este framework de JS explicando los puntos más importantes de su desarrollo. Pero para comenzar, mostraré un modo de crear ventanas modales (lightbox, thickbox, greybox, modalbox… son todas ventanas modales) sólo con CSS. Mientras puedo, ahorro en plugins para no recargar los sitios, y en el caso de las ventanas emergentes no-obstructivas utilicé un elegante método donde a través de simple CSS se abren ventanas con mensajes varios. Para gatillarla, utilicé, claro, Mootools. Pero donde tomé prestado la idea, utilizaban Javascript puro para ello. Mostraré ambos métodos, a gusto y necesidad del usuario cuál decidir ocupar.

Comenzamos con el marcado HTML. Primero, un <div class="overlay"></div> el que será el fondo semi-transparente que cubrirá la página entera, y albergará la ventana del mensaje. Luego, un <div class="modal"> que contendrá el mensaje o contenido de nuestra ventana modal. Estas 2 classes, .overlay y .modal, estarán escondidas desde un principio (display: none;) y serán gatilladas desde algún link (display: block;). Después de ellas, el contenido del resto del sitio web.

<div id="fade" class="overlay"></div>
<div id="light" class="modal">
     <p>Lorem ipsum dolor sit…..</p>
</div>
<p>Texto del sitio web. Con un <a href="">link</a> abriremos la ventana.</p>

Nada de eso nos sirve sin un correcto uso de CSS. Para la base semi-transparente le damos opacidad a través del método cross-browser:

.overlay{
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     z-index:1001;
     opacity:.75;
     -moz-opacity: 0.75;
     filter: alpha(opacity=75);
}

Y la ventana modal del contenido mismo:

.modal {
     display: none;
     position: absolute;
     top: 25%;
     left: 25%;
     width: 50%;
     height: 50%;
     padding: 16px;
     background: #fff;
     color: #333;
     z-index:1002;
     overflow: auto;
}

Ver ejemplo sólo con CSS

Ahora, lo echamos a andar. A ambos div’s debemos darle id’s únicos, los que nos ayudarán a identificar los elementos que serán mostrados vía Javascript. La orden para ejecutarlos es en Javascript puro:

document.getElementById(‘light’).style.display=’block’;
document.getElementById(‘fade’).style.display=’block’

Y a través de Mootools:

$(‘light’).setStyle(‘display’, ‘block’);
$(‘fade’).setStyle(‘display’, ‘block’);

Lo que dice ahí, en castellano universal es: toma los elementos con el id light y fade, y agrégales estilo display: block; a cada uno. O sea, los hará aparecer desde display: none (oculto) a display: block; (visible).

Ver ejemplo funcionando con JS

Links

• Create a Lightbox effect only with CSS – no javascript needed