SummArg | Cursos y recursos para webmasters

02/03/2011

Cómo puedo implementar ventanas tipo modal en mi web?

Las ventanas llamadas modal son muy utilizadas en el diseño web moderno y son, básicamente, popups dentro de la página. Se usan para resaltar alguna condición, presentar formularios, solicitar interacción del usuario, etc. Al ser activada la ventana, el resto del website se oscurece, de modo de resaltar mejor la información que deseamos mostrar.

Descargar | Demo

Para implementar estas ventanas en nuestro website primero debemos descargar los archivos de Reveal y subirlos en nuestro sitio. Entre etiquetas <head> debemos linkear la plantilla de estilos, jQuery y Reveal:

<link rel="stylesheet" href="reveal.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.reveal.js" type="text/javascript"></script>

Luego creamos nuestra caja modal, colocando la clase reveal-modal a un ID determinado:

<div id="myModal" class="reveal-modal">
     <h1>Titulo de la caja modal</h1>
     <p>Cualquier contenido que desees.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

Y finalmente creamos el link que activa el modal:

<a href="#" data-reveal-id="myModal">Abrir la ventana modal</a>

Para solucionar problemas frecuentes y personalizar las opciones de este plugin, visiten zurb.com

Dejar un comentario