Simple Vanilla JavaScript modal Library

Vista prévia

Descripción

Vanilla Modal is a simple, flexible, lightweight modal library written in pure JavaScript and CSS. Works with any web contents such as text, images, videos and more.

Instalación

# NPM
$ npm install vanilla-modal

# Bower
$ bower install vanilla-modal

¿Cómo funciona?

Importa la vainilla-modal en tu proyecto:

// ES 2015
import VanillaModal from 'vanilla-modal';

// CommonJS:
const VanillaModal = require('vanilla-modal');

// AMD
require(['/dist/index.js'], function(VanillaModal) {

const vanillaModal = new VanillaModal();
});

// Browser
<script src="/dist/index.js"></script>

Cargue la hoja de estilos requerida en el documento.

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

Inserte el contenido modal en un contenedor DIV oculto como este:

<div id="modal-demo" style="display:none">

Your modal content here
</div>

Para alternar el modal, simplemente agregue el atributo ' Data-modal-Open ' al elemento desencadenante que enlaza con el contenedor modal.

<a href="#modal-demo" data-modal-open>Launch</a>

Inicializar la biblioteca modal y listo.

var modal = new VanillaModal.default();

Todas las opciones posibles con valores predeterminados.

{

modal: '.modal',

modalInner: '.modal-inner',

modalContent: '.modal-content',

open: '[data-modal-open]',

close: '[data-modal-close]',

page: 'body',

loadClass: 'vanilla-modal',

class: 'modal-visible',

clickOutside: false,

closeKeys: [27],

transitions: true,

onBeforeOpen: null,

onBeforeClose: null,

onOpen: null,

onClose: null
}