Ventana modal compacta en Vanilla JavaScript-fafaz-modal

Vista prévia

Descripción

Un plugin de JavaScript ligero pero fácil de configuración para mostrar ventanas modales limpias mínimas en la Página Web.

Características

• Colores de fondo personalizados de & superposición modal.
• Modal desplazable que contiene toneladas de contenido Web.
• Modo de pantalla completa.
• API simple pero útil.

Funcionamiento

Enlace al JavaScript y la hoja de estilos de fafaz-modal.

<link href="build/Modal.min.css" rel="stylesheet">
<script src="build/Modal.min.js"></script>

Cree el contenido modal con un identificador único.

<div id="example" class="demo" hidden>

Modal Content Here
</div>

Cree un elemento desencadenante que apunte al contenido modal.

<button class="trigger" data-modal-id="example">Launch</button>

Inicializar la biblioteca modal.

var myModal = new fafaz.Modal.default('.trigger');

Abra/cierre el modal manualmente.

// opens the modal
myModal.open();

// close the modal
myMOdal.close();

 // reposition the modal
// ideal for responsive design
myModal.positioning();

Opciones disponibles para personalizar la ventana modal.

var myModal = new fafaz.Modal.default('.trigger',{



// custom styles of the background overlay


overlayStyle: undefined,



// custom styles of the modal window


layerStyle: undefined,



// clones node


cloneNode: false,



 // fullscreen mode


fullScreen: false



});

Controladores de eventos.

myModal.on('afterOpen', function(e){

// after open
}

myModal.on('afterClose', function(e){

// after close
}

myModal.on('afterGenerate', function(e){

// after generate
}