CSS3 Animated modal en Pure JavaScript-pureModal. js
| Autor: | igor-budzin |
|---|---|
| Views Total: | 1,997 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 26, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
pureModal. js es una biblioteca JavaScript libre de dependencias que se utiliza para crear ventanas modales animadas CSS3 que admite contenido de texto, enlaces externos y etiquetas HTML.
Funcionamiento
Incluya la hoja de estilo pureModal. CSS y JavaScript pureModal. js en la Página Web.
<link rel="stylesheet" href="css/pureModal.css"> <script src="js/pureModal.js"></script>
Cree una nueva ventana modal con varias opciones.
var modal = new pureModal({
autoOpen: true, // auto open on page load
content: "Your content or link on html tag",
titleText: "It's modal title"
}); Cree un botón para alternar la ventana modal.
<a href="#" class='openLink'>Open window</a>
var button = document.querySelector('.openLink');
button.addEventListener('click', function() {
modal.open();
}); Opciones completas con valores predeterminados.
// CSS classname for custom animation className: 'fade-and-drop', // shows close button closeButton: true, // custom content content: "", // max/min width of the modal maxWidth: 600, minWidth: 280, // shows background overlay overlay: true, // shows title title: true, // custom text titleText: "", // auto open the modal when the page is completely loaded autoOpen: false
