Load MOOdalBoxes without clicking links

The MOOdalBox script is a great addition to the mootools library. The interface is pretty slick. And easy to style with just CSS. Răzvan Brateş did a great job here. And every now and then i have to implement one of those MOOdalBoxes in a web application. No problem here.

Until today all MOOdalBoxes i used were triggered by simply clicking a link on a page. But today i needed to load a MOOdalBox window on page load. The screen represented some sort of QuickStart menu. Which can be disabled. I had no idea how to trigger the MOOdalBox from javascript. But once i read through the source. It became clear that it should be as easy as calling:

MOOdalBox.open(url, title, sizes);

This kept giving me the following error:

this.overlay is undefined

Looking through the MOOdalBox source. I noticed the this.overlay property was set inside the init() method. So let’s try that before we call the open() method.

MOOdalBox.init();
MOOdalBox.open(url, title, sizes);

This actually worked. I was pretty happy with the result. untill i opened IE 7 to test the same page. Nothing happened. No error’s and no MOOdalBox. Let’s try something else. Whenever i need to load something on page load in IE i use the window.onload method.

window.onload = function()
    MOOdalBox.init();
    MOOdalBox.open(url, title, sizes);
}

Now the overlay was loaded. But still no MOOdalBox on top of it. I figured it had something to do with the DOM not being fully loaded. But i couldn’t really think of a solution. So of to Google. After a bit of browsing i found somebody with the same problem. And a reply from the original author of MOOdalBox. Add a domready event to make it work.

window.addEvent('domready', loadMOOdal);
function loadMOOdal() {
    MOOdalBox.open('Quickstart/load', '', '700 500');
}

This did it. And my only goal was to make it function properly inside of IE 7. but this also fixes the same problem for IE 6. So a big thanks to Răzvan for creating MOOdalBox and for supplying the fix.