Basic Vanilla JavaScript modal con CSS3 Animation-vanillaModal. js
| Autor: | kingarthurpt |
|---|---|
| Views Total: | 1,767 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 30, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
vanillaModal.js is a lightweight vanilla javascript plugin intended to display a responsive, always centered modal window on your website / web app. Comes with a 'fade and drop' animation based on CSS3 transitions and transforms.
Funcionamiento
Importe la hoja de estilos vanillaModal. CSS y JavaScript vanillaModal. js en la página HTML.
<link rel="stylesheet" href="css/vanillaModal.css"> <script src="js/vanillaModal.js"></script>
Cree el contenido para el modal. También puede definir el contenido en línea mediante la opción ' Content ' durante la inicialización.
<div id="content"> <h1>Modal Heading</h1> <p>Modal Content</p> </div>
Cree una nueva instancia modal.
var myContent = document.getElementById('content');
var myModal = new Modal({
content: myContent,
}); Abra el modal.
myModal.open();
Opciones predeterminadas.
// fade and drop animation // you can add your own animation in the CSS and replace the CSS class name here className: 'fade-and-drop', // displays a close button inside the modal closeButton: true, // custom inline content displayed in the modal content: "", // max width of the modal maxWidth: 600, // min width of the modal minWidth: 280, // displays a fullscreen overlay overlay: true
