Multifunctional Lightbox/Gallery/Dialog Library – MODALit

The MODALit JavaScript library lets you create responsive, highly customizable, CSS3 animated lightbox, dialog boxes, modal windows, gallery popups on the web page.

Features:

• 6 cool transition effects: zoom, flip, slide left/right/down/up.
• 3 sizes: small, large and full.
• Supports images, photo gallery, Videos, Youtube/Vimeo videos, AJAX content and more.
• Nested popups supported as well.
• Also can be used to replace the browser confirm/alert dialog boxes.

How to use it:

Install it via package managers:

# NPM
$ npm install modalit --save
# Bower
$ bower install modalit

Or download the zip and include the following JavaScript and CSS files on the html page.

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

Create a new MODALit instance and pass the options as follows:

new MODALit({
    el: '.myModal',
    title: 'Title',
    action: {
      label: 'Close'
    }
});

Possible options to customize the library.

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.
});

Changelog:

10/09/2018

• JS & CSS update