jQuery Plugin To Create Overlays On Any Specified Elements - Purplecoat.js

Purplecoat.js is a lightweight jQuery plugin which allows you to generate an overlay/mask layer covering a specified element. You can also create multiple overlays on different element with one click.

Basic Usage:

1. Load the latest version of jQuery library and the jQuery purplecoat.js script at the end of your document.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="purplecoat.js"></script>

2. Create an element with the required Html5 data-purplecoat attribute. You can use data-purplecoat-label attribute to specify the label text displayed on the overlay.

<div data-purplecoat="demo" 
     data-purplecoat-label="I'm an overlay">
  ...
</div>

3. Create a button to generate an overlay on the element you just created.

<button data-purplecoat-toggle="demo">
  ...
</button>

4. You can use data-purplecoat-color to custom the RGBA color for the overlay.

<button data-purplecoat-toggle="demo"
        data-purplecoat-color="rgba(63, 159, 252, 0.8)">
  ...
</button>

5. Custom the default styles of the overlay at the beginning of the purplecoat.js.

 var styles = '.purplecoat { display: none; position: absolute; padding: 5px; box-sizing: border-box; background-color: rgba(142, 68, 173, 0.9); color: #FFF; text-align: center; font-weight: bold; overflow: hidden; z-index: 9999; } .purplecoat-inner { display: table; width: 100%; height: 100%; } .purplecoat-inner-text { display: table-cell; vertical-align: middle;}';

---

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