Modern modal popup plugin con vanilla JavaScript-pop-it. js
| Autor: | alejandromur |
|---|---|
| Views Total: | 2,762 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 12, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
pop-it. js es una biblioteca de JavaScript ligera y vainilla que se usa para mostrar una ventana emergente modal moderna, animada y con capacidad de respuesta en la Página Web.
Funcionamiento
Cargue el Styles. CSS necesario que proporcionará los estilos básicos para el modal.
<link href="css/styles.css" rel="stylesheet">
Cree el contenido modal de la siguiente manera:
<div class="u-modal"> <div class="u-modal-box"><!-- .modal-box--fullscreen --> <div class="tar"> <i class="u-modal-close" data-js="close-u-modal">close here</i> </div> <div class="u-modal-content"> <div class="u-modal-column--full u-modal-column--animated" data-effect="slide-up"> <h1 class="u-modal-title u-modal-txt--animated">Use this container to place your HTML elements according to your needs</h1> <p class="u-modal-txt u-modal-txt--animated">I'm a text</p> <p class="u-modal-txt u-modal-txt--animated">I'm a text</p> </div> </div> <div class="tar"> <button class="u-modal-btn" data-js="close-u-modal">Understood</button> </div> </div> </div>
Cree un botón de desencadenador con el atributo Data-JS = "Open-u-modal".
<button class="button" data-js="open-u-modal">Open pop-it</button>
Cargue el archivo JavaScript pop-it-1.0. js al final del documento.
<script src="js/pop-it-1.0.js"></script>
Cree una nueva instancia de Popit para activar el modal.
new Popit();
Opciones de configuración predeterminadas de popit.
new Popit({
// auto display on page load
auto : false,
// "active"/"disabled"
// makes the outer veil available to attach an event to close de modal box
veil : "active"
}); Registro de cambios
08/12/2018
- prefijos eliminados, las rutas a las imágenes actualizadas
