Ventana modal animada con JavaScript y transiciones CSS3-Overlay. js
| Autor: | koga73 |
|---|---|
| Views Total: | 2,640 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 7, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Overlay. js es una biblioteca de JavaScript fácil de usar para crear ventanas modales animadas y dinámicas con una superposición de pantalla completa. Utiliza transiciones CSS3 para animaciones deslizantes suaves.
Funcionamiento
Cargue el Overlay. CSS para los estilos CSS modales requeridos.
<link href="css/overlay.css" rel="stylesheet">
Cree un contenedor que sirva como lugar para que sus superposiciones vivan cuando no estén abiertas.
<div id="overlays"> <!-- Each overlay needs an id --> <div id="myOverlay1"> <h1>TEST CONTENT 1</h1> </div> <div id="myOverlay2"> <h1>TEST CONTENT 2</h1> </div> <div id="myOverlay3"> <h1>TEST CONTENT 3</h1> </div> </div>
Cree un vínculo de desencadenador para alternar la ventana modal.
<a id="overlayTrigger" href="#">Open</a>
Visualice la ventana modal al hacer clic en el enlace de alternancia.
OOP.addEventListener(trigger, "click", function(evt){
Overlay.show("myOverlay1", {
containerClass:"slide-up" // slide-up, slide-down, slide-right, slide-left
});
return false;
});
