Capa emergente de pantalla completa con JavaScript y CSS3-popup_view
| Autor: | tedshd |
|---|---|
| Views Total: | 3,345 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 23, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
popup_view es una biblioteca de JavaScript pura para crear una capa de ventana emergente de pantalla completa que usa transiciones CSS3 y transformaciones para animaciones sutiles de apertura y cierre.
Funcionamiento
Cargue el archivo CSS popup_view. CSS para los estilos emergentes básicos y las reglas de animación.
<link href="css/popup_view.css" rel="stylesheet">
Cree un botón de desencadenador para iniciar la ventana emergente.
<button id="trigger-button">Click me</button>
Agregue el contenido personalizado a la ventana emergente.
<div id="popup_wrapper" class="pop_up popup_hide"> <h1>This is a popup</h1> <div class="pop_up_close"></div> </div>
Cree una nueva instancia emergente.
var popupView = new popup();
Visualice la ventana emergente cuando haga clic en el botón disparador.
document.querySelector('#trigger-button').addEventListener('click', function () {
popupView.show(document.querySelector('#popup_wrapper'));
});
