Reveal jQuery Modals

Name: Reveal jQuery Modals
Brand: Jose Aguilar
SKU: joseaguilarblog-3524
Availability: InStock
Rating: 5 (4 reviews)

Reveal es un plugin de jQuery para obtener ventanas modales atractivas y sencillas que se pueden editar fácilmente a través de su hoja de estilos (CSS) y puede ser implementado mediante programación o con los nuevos atributos de HTML5 de datos personalizados (datos de atributo).

Un efecto interesante que tiene este plugin a mi punto de vista es que al abrirse la ventana modal se oscurece el fondo de la página obteniéndose un efecto interesante.

El plugin te lo puedes descargar de aquí.

Su implementación es bien sencilla. Tan solo necesitarás incorporar en el <head> de tu página los estilos necesarios, la librería jQuery y el plugin.

<link rel="stylesheet" href="reveal.css">    
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>

Estos archivos te vienen en el paquete de descarga.

Y luego en el <body>:

<a href="#" data-reveal-id="myModal" data-animation="fade">click me</a>

Si te fijas en el link posiblemente veas atributos que jamás habrás visto, vienen en el HTML5.

Si te resultan extraños puedes trabajar con el identificador id de la siguiente forma:

En el <head> de tu página:

<link rel="stylesheet" href="reveal.css">    
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<script type="text/javascript">
$(document).ready(function() {
     $('#myButton').click(function(e) {
          e.preventDefault();
      $('#myModal').reveal();
     });
});
</script>

Y en el <body>: