Lean Modal
LeanModal es un plugin jQuery que nos aporta la posibilidad de disponer de ventanas modales en nuestra página Web.
La idea es que al hacer click en un link o botón, se nos abra una ventanita extra con contenido oscureciendo y dejando detrás el contenido base de la página.
Para disponer de esta idea en nuestra página Web es muy sencillo. Tan solo tienes que descargar el plugin y añadir en el <head> de vuestra página la librería jQuery, el plugin y su llamada:
<script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="jquery.leanModal.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $("a[rel*=leanModal]").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" }); }); </script>
En el <body> tendremos el link que abrirá la ventana al pulsarlo:
<a href="#signup" name="signup" rel="leanModal" id="go">Abrir ventana modal</a>
Y el contenido de la ventana en display:none.
<div id="signup" style="display: none;"> <div id="signup-ct"> <div id="signup-header"> <h2>Crea una cuenta</h2> <p>Es simple y gratuito.</p> <a href="#"></a> </div> <form action=""> <div class="txt-fld"> <label for="">Usuario</label> <input type="text" name="" id=""> </div> <div class="txt-fld"> <label for="">Email</label> <input type="text" name="" id=""> </div> <div class="txt-fld"> <label for="">Contraseña</label> <input type="text" name="" id=""> </div> <div class="btn-fld"> <button type="submit">Registrarse »</button> </div> </form> </div> </div>
En este caso, el contenido de la ventanita va a ser como el que se muestra en la imagen de este artículo, un formulario de registro.
Ahora solo falta detallar los estilos del ejemplo:
#lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none; } #signup { background: none repeat scroll 0 0 #FFFFFF; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); display: none; padding-bottom: 2px; width: 404px; } #signup-header { background: url("images/hd-bg.png") repeat scroll 0 0 transparent; border-bottom: 1px solid #CCCCCC; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 18px 18px 14px; } .modal_close { background: url("images/modal_close.png") repeat scroll 0 0 transparent; display: block; height: 14px; position: absolute; right: 12px; top: 12px; width: 14px; z-index: 2; } #signup-header h2 { color: #444444; font-size: 2em; font-weight: 700; margin-bottom: 3px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); } #signup-header p { color: #444444; font-size: 1.3em; margin: 0; text-shadow: none; } #signup .txt-fld { border-bottom: 1px solid #EEEEEE; padding: 14px 20px; position: relative; text-align: right; width: 364px; } #signup .txt-fld label { color: #222222; display: block; float: left; font-size: 1.3em; padding-top: 8px; text-align: left; width: 90px; } #signup .txt-fld input.good_input { background: url("images/good.png") no-repeat scroll 236px center #DEF5E1; } #signup .txt-fld input { background: none repeat scroll 0 0 #F7F7F7; border-color: #CCCCCC #E7E6E6 #E7E6E6 #CCCCCC; border-radius: 4px 4px 4px 4px; border-style: solid; border-width: 1px; color: #222222; font-family: "Helvetica Neue"; font-size: 1.2em; outline: medium none; padding: 8px; width: 244px; } #signup .btn-fld { overflow: hidden; padding: 12px 20px 12px 130px; width: 254px; } button { background: none repeat scroll 0 0 #3F9D4A; border: medium none; border-radius: 4px 4px 4px 4px; color: #FFFFFF; float: right; font-family: "Helvetica Neue","Helvetica","Arial",sans-serif; font-size: 1.4em; font-weight: bold; overflow: visible; padding: 7px 10px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); width: auto; }
Ver más características y descarga
Gracias por el ejemplo.
Me a servido bastante.
Saludos
Cómo puedo llamar el modal desde una función ?? (sin utilizar href )
Estoy usándolo con este función $(«#id»).click(); para que se me ejecute cuando se carga la página pero como puedo crear una cookie para que se ejecute una sola vez???
Tendrás que buscar «como crear una cookie con jQuery» en google
gracias!! me sirvio de mucho
disculpa jose, como se llama el plugin para desargarlo!!
gracias
lean modal