Jquery Tools Overlay

Here’s the quick and dirty on how to create and control an overlay using jquery tools.

Download jquery tools, you can choose just the components you need: For an overlay with a mask you need overlay and expose…http://flowplayer.org/tools/download/index.html

Put the js in the appropriate place.

Then on the page that needs the overlay you only need a container with an id for the content of the overlay to live in:

<div class="for_styling" id="someId">
    The content of the overlay goes here...
</div>

To initialize the overlay:

<script type="text/javascript">
    $(function () {
        $('#someId').overlay({
            top: 'x',
            mask: {
                color: '#333',
                opacity: 0.6,
                loadSpeed: 200 //ms
            },
            closeOnClick: false, // to make it modal if you need to
            load: true // to make it load on page load
        });
        // to open the overlay at any time
        $('#someId').data('overlay').load();
        // to close the overlay at any time
        $('#someId').data('overlay').close();
    });
</script>

That’s pretty much it. There will be an element created with a class of “close”  that you can style as needed. 
This has a close function automatically attached.

There are events to attach functions to…

onBeforeLoad
before the overlay is displayed. The overlay has already been positioned at the location from where it will start animating.

onLoad
when the overlay has completely been displayed

onBeforeClose
before the overlay is closed

onClose
when the overlay is closed

…and there are methods for getting the trigger (if there is one, we didn’t look at that here), or the overlay, checking to see if it is open, etc…

I really think this is the way to go from now on, rather than using Thickbox, etc…