OK, I probably did this pretty clumsy-like but I there are some lightbox javascript things out there that piss me off because I have to explicitly click a "close" button to eliminate the lightbox layer. Until now, I haven't been able to think of a good way to close the layer simply by clicking outside of the box.

It seems like a simple problem if you use some combination of mouseover and mouseout or but for some reason Firefox wasn't liking my mouseouts. I'm not trying to mimic a hover like most navigation menus do either. Here is specifically what I hoped to accomplish:

• click on a button to open an absolutely positioned popup layer that holds an AJAX search form
• I can move the mouse anywhere within the layer and click anywhere within that box without closing the layer.
• If I click anywhere on the page OUTSIDE of the popup layer it should close.
• Accomplish this with MochiKit, no pulling stuff from other js libraries.

The link opens a search:

<a onclick="javascript:showSearch(event,'otherbox')">Click me!</a>

This is my theoretical box:

<div id="otherbox">I'm an absolute position DIV layer. should show up wherever. yay!</div>

This is my javascript:

function showSearch(e,id) 
{
    // fade in the 'otherbox' layer
    // take advantage of the afterFinish effect option
    // is necessary because cannot calculate the 
    // dimensions of 'otherbox' unless it's in the DOM
    // i have to use the function () {} in afterfinish
    // because mochikit expects that to be a function. 

    appear(id,{duration:0.2, afterFinish:function () {delayedWindowCloser(id);} });

}

delayedWindowCloser = function (id) {
    //scrub is a custom defined object of my own type
    var scrub = { 
           'id':id,
           'pos':getElementPosition(id) , 
           'dim':getElementDimensions(id) , 
           'calc': function(evt) {
                
             //evt is passed in automagically by browser
                var click = evt.mouse().page;
             //find the bounds of the box
                if (
                    (click.x < this.pos.x) || 
                    (click.x > this.pos.x + this.dim.w) || 
                    (click.y < this.pos.y) || 
                    (click.y > this.pos.y + this.dim.h)
                   ) 
                {
//to get here i must have clicked outside the box boundary
//thus, close the box.
                    fade(this.id,{duration:0.2});
                }
           } 
        };

    //make an 'onclick' event for the browser window.
    //if i click anywhere in the browser it will fire the 
    // 'calc' function defined in my 'scrub' object
    // that i just defined above

    connect(window,'onclick', scrub , 'calc' );
}