Multifunctional Lightbox/Gallery/Dialog Library – MODALit

Category: Javascript , Modal & Popup , Recommended | September 24, 2017
Author: knot-design
Views Total: 294
Official Page: Go to website
Last Update: September 24, 2017
License: MIT

Preview:

Multifunctional Lightbox/Gallery/Dialog Library – MODALit

Description:

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

    Hello,

    Seems great but does not seem to work here:
    – Where exactly do we put the modal instance (example please) ?
    – How do you launch the popup on page load ?