jQuery Plugin To Create An Overlay Over An Element - Dark Overlay

Dark Overlay is a jQuery plugin used to create a customizable overlay covering an Html element when hovering or clicking on it.

How to use it:

1. Load the jQuery library and jQuery dark overlay plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dark-overlay.js"></script>

2. Create an Html element you'd like to apply on a dark overlay.

<div class="darken">
</div>

3. Create a default overlay when clicking on the element.

$(function() {
$('div.darken').click(function() {
$(this).toggleOverlay();
});
});

4. Or using hover function.

$(function() {
$('div.darken').hover(function() {
$(this).toggleOverlay();
});
});

5. Customize the overlay.

$(function() {
$('div.darken').hover(function() {
$(this).toggleOverlay({
'opacity': 0.5,
'allowClickThrough': true,
'fadeInDuration': 0
});
});
});

---

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