Cómo hacer una simple ventana modal con HTML y Javascript

Según se afirma en la Wikipedia, la aparición de Lightbox animó a otros desarrolladores a crear proyectos similares, como el popular Thickbox, basado en jQuery. Lightbox y sus descendientes son aplicaciones escritas en Javascript que hacen un uso intensivo del DOM para mostrar contenido web de forma modal y visualmente atractiva. Andrés Nieto ha recopilado en su página más de veinte de esos proyectos.

Si bien es cierto que no hay que estar inventando la rueda todos los días, porque ya alguien lo hizo por nosotros, hay circunstancias en las que necesitamos una rueda hecha a medida. Por eso, saber cómo se han hecho otras ruedas puede sernos útil para hacer la nuestra.

A continuación explicaré los elementos básicos que necesitamos para hacer una rueda, perdón, una simple ventana modal con HTML y Javascript…

Primero necesitamos un contenedor, un espacio donde ubicar el contenido web que deseamos mostrar. Normalmente ésto se hace con la etiqueta DIV. Este contenedor formará parte de la página web, pero no se mostrará cuando se visualice la página: será un elemento invisible. Luego necesitamos alguna manera de mostrar el contenedor, y su contenido, cuando nos haga falta. Y por último, necesitaremos también alguna forma de ocultar el contenedor. ¡Manos a la obra!

Pega al final de la sección body de tu página web el siguiente código:

<div id=”miVentana” style=”position: fixed; width: 350px; height: 190px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 3px solid; background-color: #FAFAFA; color: #000000; display:none;”>
Aquí pones tu contenido web
</div>

Los propiedades más importantes de este DIV son:

id: el identificador del elemento, que nos permitirá recuperarlo y acceder a él a través del DOM.
display: le indicamos al navegador que no muestre este elemento (none).

Dentro del DIV deberás colocar el contenido web que deseas mostrar. ¡Procura que quepa dentro del contenedor!

Luego crea un elemento de script en tu código HTML e inserta las siguientes líneas:

function mostrarVentana()
{
    var ventana = document.getElementById(‘miVentana’);
    ventana.style.marginTop = “100px”;
    ventana.style.left = ((document.body.clientWidth-350) / 2) +  “px”;
    ventana.style.display = ‘block’;
}

Esta función Javascript obtiene una referencia al contenedor a través de su id, lo coloca en el centro del documento mostrado en el navegador, y lo hace visible.

Por último, agrega éstas líneas de código:

function ocultarVentana()
{
    var ventana = document.getElementById(‘miVentana’);
    ventana.style.display = ‘none’;
}

Esta función obtiene una referencia al contenedor a través de su id, y lo hace invisible.

Y ya ‘tá. Con ésto tenenemos todos los elementos básicos para hacer una simple ventana modal con HTML y Javascript. A partir de aquí puedes mejorar el proyecto con todo lo que se te ocurra, o simplemente con las funcionalidades que requiera tu proyecto web.

He probado este ejemplo con Internet Explorer 7 y Firefox 3. Con otros navegadores quizás no funcione correctamente (IE6) ya que, en busca de la mayor simplicidad, no implementé ninguna técnica de detección de navegadores.

Enlaces de interés:
El proyecto descrito en acción
Código completo del ejemplo