You can’t get much better than this.
Custom effects, customize using CSS hooks, define custom callbacks (did I mention you can customize it?), run wild with CSS3, and the best part?
It’s from Tom McFarlin:
Features include:
- Supports jQuery Effects
Fade, slide, or nothing at all. You can use it for the entire page or a single element. - Customize with CSS Hooks
With class names given to both the overlay and trigger, you can can tweak the look and feel. - Add Behavior
Control when the overlay appears or disappears with your own custom functions. It also works great for modal dialog or manipulating the DOM until the user has completed an action. - Options
Multiple overlays, multiple containers, CSS3-glossy effects, and more.
It’s easy to get started!
[cc lang=”jquery”]// Add the overlay when #container has been clicked.
$(‘#container’).click(function() {
$(this).overlay({
color: ‘#999’, // set the color of the overlay
opacity: 0.25, // display it with a 25% opacity
effect: ‘fade’, // fade the overlay in and out
closeOnClick: true, // dismiss the overlay when it’s clicked
glossy: true, // apply a CSS3-glossy effect to the overlay
container: “body”, // have the overlay display within the entire body
onShow: function() { // display an alert when the overlay shows
alert(“Displayed!”);
},
onHide: function() { // display an alert when the overlay is hidden
alert(“Hidden.”);
}
});
});[/cc]
Check the demo and grab the download from Simple Overlay.
Speak your mind...