The Lightbox Effect without Lightbox

Particle Tree posted an article the other day on how to modify the Lightbox javascript to work with regular divs and not just images. A few days before that article went up, I had the same bit of inspiration for Wayfaring.

We’re not afraid of pushing the envelope on the site, so if we like an idea, we’ll roll with it until too many of our users tell us it sucks. (That hasn’t ever happened incidentally)

When I first started trying to figure out how to do this, I wasted a lot of time trying to hack the Lightbox code and it was ugly. I thought better of using code I wasn’t proud of, so here’s how I did it:

#overlay{ 
    background-image: url(/images/overlay.png);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 90;
    width: 100%;
    height: 100%;
}

* html #overlay{
    background-color: #333;
    background-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src="/images/overlay.png", sizingMethod="scale");
}

#box{
    width:300px;
    background:#2d2d2d;
    padding:10px;
    border:2px solid #eee;
}

#close{
    position:absolute;
    top:-5px;
    right:-5px;
    cursor:pointer;
}

Most the css was lifted straight from the Lightbox css. Next is the HTML, which also includes Lightbox’s neat little close image.

<div id="overlay" onclick="hideBox()" style="display:none"></div>

<div id="box" style="display:none">
    <img id="close" src="/images/close.gif" onclick="hideBox()" alt="Close" 
         title="Close this window" />
    Here's a bunch of really sweet content!
</div>

And finally we have the javascript. The center function was lifted directly from here with a few slight modifications. Note: You also need Prototype for this script to work.

function showBox(){
    $('overlay').show();
    center('box');
    return false;
}

function hideBox(){
    $('box').hide();
    $('overlay').hide();
    return false;
}

function center(element){
    try{
        element = $(element);
    }catch(e){
        return;
    }

    var my_width  = 0;
    var my_height = 0;

    if ( typeof( window.innerWidth ) == 'number' ){
        my_width  = window.innerWidth;
        my_height = window.innerHeight;
    }else if ( document.documentElement && 
             ( document.documentElement.clientWidth ||
               document.documentElement.clientHeight ) ){
        my_width  = document.documentElement.clientWidth;
        my_height = document.documentElement.clientHeight;
    }
    else if ( document.body && 
            ( document.body.clientWidth || document.body.clientHeight ) ){
        my_width  = document.body.clientWidth;
        my_height = document.body.clientHeight;
    }

    element.style.position = 'absolute';
    element.style.zIndex   = 99;

    var scrollY = 0;

    if ( document.documentElement && document.documentElement.scrollTop ){
        scrollY = document.documentElement.scrollTop;
    }else if ( document.body && document.body.scrollTop ){
        scrollY = document.body.scrollTop;
    }else if ( window.pageYOffset ){
        scrollY = window.pageYOffset;
    }else if ( window.scrollY ){
        scrollY = window.scrollY;
    }

    var elementDimensions = Element.getDimensions(element);

    var setX = ( my_width  - elementDimensions.width  ) / 2;
    var setY = ( my_height - elementDimensions.height ) / 2 + scrollY;

    setX = ( setX < 0 ) ? 0 : setX;
    setY = ( setY < 0 ) ? 0 : setY;

    element.style.left = setX + "px";
    element.style.top  = setY + "px";

    element.style.display  = 'block';
}

That’s all there is to it! To make all of this goodness appear, you just need to call showBox().

The center function is a bit long, but most of that is just browser compatibility code. If you can make it any easier than this, I’m all ears, but I’m fairly satisifed with this solution.

14 comments