Remodal

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.

remodal

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:

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

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

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

<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

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!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Deja un comentario

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