Creando una ventana modal con CSS y Javascript (Actualizado)

En este tutorial veremos una forma de crear una ventana modal con javascript y CSS de manera sencilla y a su vez que sea ligera, sin necesidad de recurrir a pesadas librerías.

Es importante que sepas que esto no reemplaza un script como lo es Shadowbox, ya que este está limitado a una ventana modal única, puede servir para crear un formulario de contacto, un anuncio, publicidad, etc.

Puedes ver el resultado mediante los siguientes ejemplos (Presiona sobre alguno para ver el efecto):

Ejemplo vídeo:

Ejemplo imagen:

Ejemplo formulario contacto:

El tutorial:

Paso 1: Insertando javascript:

Deberás saber que para hacer que la ventana modal funcione correctamente deberás utilizar 2 scripts, uno que muestre el contenedor y otro que al presionar en él lo oculte, para ello crearemos 2 funciones una que llamaremos "mostrareldiv()" y la otra "ocultareldiv()", a esta les asignaremos según ID la propiedad "style".

Al usar la primera función, haremos que el contenedor se muestre mediante "display:block" y cuando se use la segunda función haremos que se oculte mediante "display:none". Para ahorrarles el trabajo y si no saben javascript básico pueden usar el siguiente código el cual incluye las 2 funciones para que los eventos funcionen correctamente:

<script type="text/javascript">
function mostrareldiv() {
document.getElementById("modal").style.display = "block" ; // permite asignar display:block al elemento #modal
}

</script>

<script type="text/javascript">
function ocultareldiv() {
document.getElementById("modal").style.display = "none" ; // permite ocultar el contenedor al hacer clic en alguna parte de éste mediante display:none en el elemento #modal
}

</script>

Este código deberás pegarlo antes de </head>

Paso 2: Usando CSS:

Ahora será necesario usar CSS con todos los contenedores, los cuales son los siguientes:

• #modal corresponde al contenedor negro que se sobrepone al blog.
• #contenido-interno es el contenedor que mostrará la ventana deseada.

Ahora bien, para no complicarles la estructura he establecido cada atributo con una descripción destacada en verde:

#modal {
width:100%; /*Toma el 100% del ancho de la página*/
height:100%; /*Toma el 100% del alto de la página*/
position:fixed; /*Con este código hacemos que el contenedor se mantenga en la pantalla y para que tome las dimensiones del body y no de la entrada*/
background-color: rgba(1, 1, 1, 0.9); /*Color de fondo, incluye opacidad del 90%*/
top:0; /*Position superior*/
left:0; /*Posición lateral*/
z-index:9999; /*Evitamos que algún elemento del blog sobreponga la ventana modal*/
}
#contenido-interno {
margin:140px auto; /*Separación arriba y centrado*/
font-size:12px; /*Tamaño de la fuente*/
width:600px; /*Ancho del contenedor*/
text-align:center; /*Alineación del texto*/
color:#222; /*Color del texto*/
background:#fff; /*Color de fondo*/
}

Este código deberás pegarlo antes de ]]></b:skin>.

Paso 3: Usando la ventana modal:

Ahora que ya tenemos el script y también los estilos creamos el contenedor:

<div onclick="ocultareldiv()" id="modal" style="display:none">
  <div id="contenido-interno">
Acá deberás incrustar algún contenido.
</div></div>

Como puedes apreciar el elemento "modal" tiene una instrucción de ocultar el contenedor cuando se presione en él, además viene establecido el atributo "display:none" para que por defecto no se muestre en ningún lado.


Para llamar al contenedor basta con crear un elemento, ya sea una imagen, un botón, un enlace, etc. y asignarle el valor "onclick="mostrareldiv()", veamos un ejemplo:

<img "onclick="mostrareldiv()" border="0" src="URL-IMAGEN" />

Actualización:

Es posible auto ejecutar la ventana modal asignando un tiempo a la función que queramos que se ejecute mediante el siguiente código:

setTimeout("mostrareldiv()", 15000); // Cantidad de milisegundos que tardará en aparecer la función

 Este código deberás pegarlo en algún sitio del script.