Lightbox_me - the programmer's lightbox tool

What is it?

Have you ever had a DOM element that you wanted lightboxed, but didn't want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you.

Lightbox_me is an essential tool for the jQuery developer's toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss.

Features

Lightbox_me handles all of those annoying edge cases that other lightbox solutions do not:

• Handles overlay resize when the window is resized
• Handles overlay size in cases where the document is smaller than the window
• Handles position: fixed in all browsers
• Position: fixed automatically swaps to position: absolute when the window size is smaller than the modal, so the user can scroll to see the contents

In addition it's got these other nice features:

• Tiny footprint (just over 1000 bytes gzipped & compressed)
• Small DOM overhead (adds 1 DOM element for the overlay)
• Dynamic iFrame shim is created and destroyed for the IE 6 select box peek issue (tested and working on https pages)
• Supports IE 7+, Firefox 2.5+, Safari, Chrome (haven't tested in Opera yet)

This is a typical use-case for a modal: a sign in sheet. Create the sign in sheet in your document, then set it to display: none;, then attach a click handler to the item you want to invoke the sign in sheet:

$('#try-1').click(function(e) {
    $('#sign_up').lightbox_me({
        centered: true, 
        onLoad: function() { 
            $('#sign_up').find('input:first').focus()
            }
        });
    e.preventDefault();
});
                    

Be sure and resize the browser height and scroll around to observe the various cases outlined above.

You can manually trigger a close event by calling .trigger('close') on the element you have lightboxed. For example:Triggering a close

$ele.lightbox_me();
$ele.trigger('close');
						

Triggering a reposition

Repositioning happens on window resize or scroll, but sometimes you may need to trigger it manually. Call .trigger('reposition'); on the element you have lightboxed. For example:

$ele.lightbox_me();
$ele.trigger('reposition');