La ventana emergente modal de JavaScript puro con transiciones CSS3-Tingle. js
| Autor: | robinparisi |
|---|---|
| Views Total: | 3,979 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 2, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Tingle. js le ayuda a crear una ventana emergente modal de contenido enriquecido de pantalla completa con transiciones puras de JavaScript y CSS3 para animaciones de apertura y cierre.
¿Cómo funciona?
Cargue el Tingle. CSS stylehsheet en el encabezado del documento.
<link href="dist/tingle.css" rel="stylesheet">
Cargue el archivo de JavaScript del núcleo Tingle. js en el documento donde sea necesario.
<script src="dist/tingle.js"></script>
Envuelva el contenido modal en un contenedor DIV.
<div class="tingle-demo"> Modal Content </div>
Cree un botón para alternar el modal.
<button class="trigger-button">Lanuch the modal</button>
Inicializar el modal.
tingle.modal.init();
Habilite el botón de desencadenador para iniciar el modal coincidente.
var btn = document.querySelector('.trigger-button');
btn.addEventListener('click', function(){
tingle.modal.setContent(document.querySelector('.tingle-demo').innerHTML);
tingle.modal.open();
}); More API methods.
// close the modal
tingle.modal.close();
// remove the modal from DOM
tingle.modal.destroy();
// set modal content
tingle.modal.setContent(''); Registro de cambios
v0.13.2 (06/02/2017)
