Ventana modal animada interactiva con JavaScript puro

Vista prévia

Descripción

Una biblioteca de JavaScript vainilla que le ayuda a crear una sencilla ventana modal adaptable con animaciones de fantasía Show/Hide basadas en CSS3.

Funcionamiento

Cargue la hoja de estilos requerida en el encabezado.

<link rel="stylesheet" href="jh-modal.css">

Inserte el contenido HTML en el contenedor modal.

<div id="content">

<h1>Look at me!</h1>

<p>I'm a modal window.</p>
</div>

Cree un botón de desencadenador para iniciar la ventana modal.

<button id="trigger" class="trigger-button" type="button">Launch Modal</button>

Inicializar la ventana modal. De forma predeterminada, la ventana modal se desliza hacia abajo desde la parte superior de su navegador cuando se desencadena.

var myContent = document.getElementById('content');

var myModal = new Modal({


content: myContent
});

var triggerButton = document.getElementById('trigger');

triggerButton.addEventListener('click', function() {


myModal.open();
});

Opciones predeterminadas.

var myModal = new Modal({



// auto open on page load


autoOpen: false,



// animation type


// fade-and-drop, zoom, zoom-and-spin


className: 'fade-and-drop',



// display a close button


closeButton: true,



// modal content to be displayed


content: "",



// max / min width of the modal window


maxWidth: 600,


minWidth: 280,



// display a fullscreen overlay


overlay: true



});