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 ejemplo en funcionamiento

Ver más características y descarga

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(3 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

7 respuestas a “Lean Modal”

  1. Zadot dice:

    Gracias por el ejemplo.

    Me a servido bastante.

    Saludos

  2. Herber dice:

    Cómo puedo llamar el modal desde una función ?? (sin utilizar href )

  3. Tan dice:

    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???

  4. jose dice:

    gracias!! me sirvio de mucho

  5. jose dice:

    disculpa jose, como se llama el plugin para desargarlo!!
    gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre