jQuery Plugin For Attaching Floating Panels To Elements - ContentOverlay

ContentOverlay is a lightweight jQuery plugin that creates a custom floating panel (content overlay) attaching to any element when selected. Great for creating a floating edit toolbox for your editable html content.

Basic usage:

1. Load jQuery library together with the jQuery contentoverlay plugin's JS and CSS files in the html document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/content-overlay.js"></script>
  ...
<link rel="stylesheet" href="dist/content-overlay.css">

2. Create a custom content overlay.

<div id="content-overlay">
  ...
</div>

3. Call the function on anywhere the content overlay attaches to.

$('SELECTOR').contentOverlay();

4. API events.

// fired when the content overlay is shown
$('.editable').contentOverlay().on('show', function(e) {
  // ...
})

// fired when the content overlay is hidden
$('.editable').contentOverlay().on('hide', function(e) {
  // ...
});

---

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