SummArg | Cursos y recursos para webmasters

18/07/2011

Ventana modal con jQuery leanModal plugin

LeanModal es un plugin jQuery que nos permite colocar ventanas del tipo modal en nuestros proyectos en pocas líneas de código. No tiene imágenes, es ultra-liviano (780 bytes en su versión minified), soporta varias instancias en la misma página, su tamaño es personalizable y resulta ideal para formularios de login, registro, suscripción, alertas, etc.

En contrapartida su punto negativo es que no soporta iframes, galerías ni ajax. Tampoco funciona bien en IE6, pero ya ni tendría que tenerse en cuenta ese navegador…

Para implementarlo primero descargamos el plugin desde su sitio y entre etiquetas <head> de nuestro documento insertamos jQuery, LeanModal y finalmente seteamos el script para que funcione con <a rel=”leanModal”>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200 });
});
</script>

Luego en cualquier parte de nuestro HTML insertamos una llamada a una caja con contenido de la siguiente manera:
<a id="go" rel="leanModal" name="test" href="#test">Basic Content</a>
Y antes de la etiqueta de cierre </body>, colocamos en un div el contenido de #test
<div id="test">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero purus, convallis nec vestibulum eget, luctus vitae purus. Vestibulum non mauris et sem vulputate pellentesque ac a turpis. Ut vel lacus vitae justo vestibulum lobortis. Nunc ipsum ipsum, laoreet id dictum nec, fermentum vel purus. Maecenas nisl felis, faucibus non rutrum eu, sollicitudin sed ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dignissim lacinia tempus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla accumsan pellentesque velit, a malesuada diam tristique a. Fusce eleifend magna erat, et imperdiet orci. Quisque sapien mauris, malesuada eu tristique pulvinar, placerat id ligula. Vivamus vitae viverra nulla. Donec eget turpis vel erat malesuada sodales.</p>
</div>

Finalmente añadimos en nuestro CSS el siguiente contenido:
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}

Descargar | Demo

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: LeanModal es un plugin jQuery que nos permite colocar ventanas del tipo modal en nuestros proyectos en pocas líneas de código. No tiene imágenes, es ultra-liviano (780 bytes en su versión minified), soporta varias instancias …..

Dejar un comentario