Minimal Clean jQuery Modal & Dialog Plugin - tinyLayer

tinyLayer is a jQuery plugin used to create minimal, clean looking modals and/or dialog boxes that helps display alerts, notifications or content layers on the webpage.

How to use it:

1. Include the style sheet jquery.tiny-layer.css in the document's head section.

<link rel="stylesheet" href="jquery.tiny-layer.css">

2. Embed your custom content into the modal & dialog popup.

<div id="layer-demo" class="layer-demo tiny-layer-hide">
  ... Content Goes Here ...
</div>

3. Create a toggle button with the data-layer-target attribute targeting to the modal container.

<button type="button" data-layer-target="#layer-demo">Launch</button>

4. Include jQuery library and the jquery.tiny-layer.js script at the end of the document. That's it.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery.tiny-layer.js"></script>

5. A few configuration options to customize the plugin.

// will be used as filter for elements triggering a layer in click event delegation for body
triggerSelector: '[data-layer-target]',

// data key of trigger element for layer id
triggerTargetKey: 'layerTarget',

// CSS classes
layerItemClass: 'tiny-layer-item',
layerItemContentClass: 'layer-item-content',
layerItemCloseClass: 'tiny-layer-item__close',

// used to create layer items with jQuery
layerItemTpl: '<article class="tiny-layer-item"><div class="layer-item-content"></div></article>',

// css class for open and close handling
visibilityToggleClass: 'tiny-layer-item--visible',

layerOptions: {

  // markup of the close button to be appended, false if not
  closeBtnMarkup: '<button class="layer-item-close" type="button">x</button>',

  // close other open layers when opening a layer
  autoCloseOthers: true,

  // close the layer whose overlay was clicked
  closeOnOverlayClick: true,

  // close the layer by ESC Key
  closeOnEscKey: true,

  // callbacks
  onCreate: function() {},
  onOpen: function() {},
  onClose: function() {}
  
}

6. You can also pass the options to each layer via data attribute like this.

<div id="layer-demo" 
     class="layer-demo tiny-layer-hide"
     data-close-on-overlay-click="false" 
     data-close-btn-markup="false">
     ... Content Goes Here ...
</div>

Change log:

2016-06-29

• AJAX-enabled

v0.3.0 (2016-06-27)

• JS update

---

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