Responsive Any Content Modal Plugin For jQuery - lity

File Size: 3.19 MB
Views Total: 8862
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Any Content Modal Plugin For jQuery - lity

lity is a lightweight, responsive, accessible, fullscreen modal window plugin for jQuery (or zepto) that works with any web content such as images, text, iframes, Youtube videos and more. Works in modern browsers.

How to use it:

1. First, the jQuery library needs to be included. Then, download the plugin and link to the lity plugin's JavaScript & Stylesheet files.

<link href="/path/to/lity.css" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/lity.js"></script>

2. Add the 'data-lity' attribute to the modal trigger element and specify the content to be displayed in the modal window.

<a href="1.jpg" data-lity data-lity-desc="Image Desc">Image</a>
<a href="//" data-lity>Youtube Video</a>
<a href="//" data-lity>Vimeo Video</a>
<a href="//,+Mountain+View,+CA" data-lity>Google Maps</a>

3. If you want to load the inline content to the modal window.

<a href="#myModal" data-lity>Launch</a>

<div id="myModal" class="lity-hide">
  Modal content here

4. You're also allowed to create the modal windows programmatically.

// lity(target, option, HTMLElement|$ opener)

// Open a URL or HTML in a lightbox
var lightbox = lity('//');
var lightbox = lity('<p>Modal Content Here</p>');

// Bind as an event handler
$(document).on('click', '[data-lightbox]', lity);

5. Possible plugin options.

  esc: true, // close by ESC key
  handler: null,
  handlers: {
    image: imageHandler,
    inline: inlineHandler,
    youtube: youtubeHandler,
    vimeo: vimeoHandler,
    googlemaps: googlemapsHandler,
    facebookvideo: facebookvideoHandler,
    iframe: iframeHandler
  template: '<div class="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabindex="-1"><div class="lity-wrap" data-lity-close role="document"><div class="lity-loader" aria-hidden="true">Loading...</div><div class="lity-container"><div class="lity-content"></div><button class="lity-close" type="button" aria-label="Close (Press escape to close)" data-lity-close>&times;</button></div></div></div>' // custom template

6. API methods.

var lightbox = lity('//');

// closes the modal

// returns the root HTML element

// returns the trigger element

// returns the content element

// sets or returns options

7. Events.

$(document).on('lity:open', function(event, instance) {
   // on open

$(document).on('lity:close', function(event, instance) {
   // on close

$(document).on('lity:ready', function(event, instance) {
   // on ready

$(document).on('lity:remove', function(event, instance) {
   // on remove

$(document).on('lity:resize', function(event, instance) {
   // on resize


v2.4.1 (2020-04-26)

  • Compatibility with jQuery 3.5.0

v2.4.0 (2019-11-22)

  • Allow 'autoplay' on YouTube

This awesome jQuery plugin is developed by jsor. For more Advanced Usages, please check the demo page or visit the official website.