Custom Inline Content Dialog & Modal Plugin - jQuery LightLayer

A lightweight, easy-to-use yet fully customizable jQuery Modal & Dialog plugin that supports any content loaded from within the document.

Features:

• Custom appearance of your modal window.
• Allows you to cache values of form fields in the modal.
• Works with data transfer.
• Supports any web content: text, image, Youtube video, Google maps, etc.

How To Use it:

1. Include reference to jQuery library and the jQuery LightLayer plugin's files.

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

2. Embed your content to the modal following the markup structure as these:

<div class="popup" id="demo">
  <div class="head">
    <label class="ttl-popup">Modal Title</label>
  </div>
  <div class="body">
    Modal Body
  </div>
  <div class="foot">
    Modal Footer
    <div class="buttons">
      <input class="custom-close" type="button" value="Close" />
    </div>
  </div>
</div>

3. Hide the modal content on page load.

.popup { display: none; }

4. Initialize the plugin and done.

$.lightlayer();
// or
$('#demo').lightlayer();

5. Customize the modal by overriding the following parameters:

$('#demo').lightlayer({

  // enables cache
  cache           : true,

  // enables ESC key to close the modal
  escape          : true,

  // middle | third(1/3) | top
  position        : 'middle',

  // background color
  backgroundColor : '#000000',

  // opacity
  opacity         : 0.3,

  // traision speed
  transition      : 0.1
  
});

6. API methods.

// sets background color
$.lightlayer().backgroundColor('FFFFFF');

// sets opacity level
$.lightlayer().opacity(1);

// sets position
$.lightlayer().position('top');

// enables/disables ESC key
$.lightlayer().escape(false);

$.lightlayer().change({
  // options here
});

// exits
$.lightlayer().exit();

6. Event handlers:

$.lightlayer({
  onOpen: function( e, popup ) {
    // do something
  },
  onClose: function( e, popup ) {
    // do something
  },
  onChangeBackgroundColor: function( e, data ) {
    // do something
  },
  onChangeOpacity: function( e, data ) {
    // do something
  },
  onChangePosition: function( e, data ) {
    // do something
  },
  onChangeEscape: function( e, data ) {
    // do something
  },
  onChangeSettings: function( e, data ) {
    // do something
  }
});

---

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