Remodal

Name: Remodal
Brand: Jose Aguilar
SKU: joseaguilarblog-6673
Availability: InStock
Rating: 5 (4 reviews)

Remodal es un plugin jQuery que permite disponer en tu página Web de ventanas modales. Es sensible, ligero, rápido, sincronizado con animaciones CSS y totalmente personalizable.

Para incorporarlo en tu página Web tan solo tienes que descargar el paquete con ejemplo incluido en GitHub.

Dentro hay unos archivos. Debes localizar las hojas de estilo e incluirlas en tu cabecera. Por ejemplo:

Source code

<link rel="stylesheet" href="css/remodal.css">
<link rel="stylesheet" href="css/remodal-default-theme.css">

Antes de la etiqueta de cierre de </body> deberás incluir la librería jQuery, en el caso de que no la tengas y el plugin:

Source code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/remodal.js"></script>

Situar el enlace que abrirá la ventana modal en la posición que corresponda dentro del <body>:

Source code

<a href="#modal">Link to modal</a>

Y finalmente, añadir el contenedor de la ventana modal antes de la etiqueta de cierre del </body>:

Source code

<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
        <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
        <div>
            <h2 id="modal1Title">Remodal</h2>
            <p id="modal1Desc">
                Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin
                with declarative state notation and hash tracking.
            </p>
        </div>
        <br>
        <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
    </div>

La clave del asunto está en los identificadores del contenedor modal, es decir: data-remodal-id=»modal» y la definición del atributo href del enlace hacía este identificador.

Como puedes observar es totalmente configurable vía HTML y CSS.

Ver ejemplo en funcionamiento