Lightbox multifuncional/Galería/biblioteca de diálogos-MODALit
| Autor: | knot-design |
|---|---|
| Views Total: | 1,322 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 9, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
La biblioteca de JavaScript MODALit le permite crear responsive, altamente personalizable, caja de luz animada CSS3, cuadros de diálogo, ventanas modales, popups Galería en la Página Web.
Características
- 6 efectos de transición geniales: zoom, voltear, deslizar hacia la izquierda/derecha/abajo/arriba.
- 3 tamaños: pequeño, grande y lleno.
- Soporta imágenes, Galería de fotos, videos, videos de YouTube/Vimeo, contenido AJAX y más.
- Los popups anidados también se admiten.
- También se puede utilizar para reemplazar los cuadros de diálogo de confirmación/alerta del navegador.
Funcionamiento
Instálelo a través de gestores de paquetes:
# NPM $ npm install modalit --save # Bower $ bower install modalit
O descargue el archivo zip e incluya los siguientes archivos JavaScript y CSS en la página HTML.
<link rel="stylesheet" href="MODALit.min.css"> <script src="MODALit.min.js"></script>
Cree una nueva instancia de MODALit y pase las opciones de la siguiente manera:
new MODALit({
el: '.myModal',
title: 'Title',
action: {
label: 'Close'
}
}); Opciones posibles para personalizar la biblioteca.
new MODALit({
el: '#button',
title: 'Title',
content: 'content',
footer: '',
transition: 'zoom',
position: 'right bottom',
action: {
label: 'Action',
fn: function() {
alert('action');
}
},
cancel: {
label: 'Cancel',
fn: function() {
alert('cencel');
}
},
width: 'large',
backdrop: '',
fixed: 'modal-open'
}); new MODALit({
el: '#button',
target:
undefined,
title: 'Title',
content: 'content',
footer: '',
src: undefined, // media url
transition: 'zoom', // zoom/flip/slideLeft/slideRight/slideUp/slideDown
position: 'right bottom',
action: {
label: 'Action',
class: undefined,
fn: function() {
alert('action');
}
},
video:
{
autoplay: false,
destroy: false
},
cancel: {
label: 'Cancel',
class: undefined,
fn: function() {
alert('cencel');
}
},
dismiss: {
backdrop: true,
esc: true
},
width: 'large',
backdrop: '',
slider: false,
// Enable or disable group slideshow
navi: false, //
Enable or disable navigation link
fixed: 'modal-open' // disables scrolling of background content while the popup is visible.
}); Registro de cambios
10/09/2018
- JS & actualización de CSS
