I occasionally have the need to display an overlay element whenever I want to display some time of dialog in the context of my project.
Unfortunately, most plugins or third-party options are a little heavy for having to add a simple overlay. Here’s a function I’ve been using in the past couple of projects:
function create_overlay($) { var d = document.createElement('div'); $(d).css({ background: 'black', opacity: '0.5', width: '100%', height: '100%', position: 'absolute', top: 0, left: 0, display: 'none', zIndex: 100 }).attr('id', 'overlay'); $('body').append(d); }
The function accepts the jQuery function as a parameter (in case noConflict() has been executed) and then appends the overlay to the DOM.
Usage would be as follows:
if($('#overlay').length === 0) { create_overlay($); } $('#overlay').fadeIn('fast');
Leave a Reply
You must be logged in to post a comment.