Oct 17th 2008 × The simple MODAL window via mootools
Having noticed a trend on Google Webmaster Tools and even Google Analytics for a fair amount of searches and results on the subject of ‘modal’, here is a little snippet to help.
There is only so much you can do to customise a simple layer that takes up the whole visible screen – z-index, colour and opacity. Another thing that can be useful is to pass on click events at creation. But you can build on it all of this as you see fit, here is the code itself:
var toggleModal = function(backgroundColour, options) {
// modal view for the whole screen
// ver 2.02 17/10/2008 03:42:06
if ($("modal")) {
$("modal").dispose();
return false;
}
var options = $merge({
zIndex: 10000000,
opacity: .8,
events: $empty()
}, options);
if (!$type(backgroundColour) && !$("modal"))
return false;
return new Element("div", {
id: "modal",
styles: {
position: "absolute",
top: 0,
left: 0,
width: window.getScrollWidth(),
height: window.getScrollHeight(),
background: backgroundColour,
"z-index": options.zIndex
},
opacity: options.opacity,
events: options.events
}).inject(document.body);
} // end toggleModal
// example usage
toggleModal("#fff"); // create a white modal, default options.
// ... do stuff
toggleModal(); // close it.
// something more fancy...
toggleModal("#555", {
zIndex: 1000,
events: {
click: function() {
$("modal").fade(0); // want to gently fade it out
// do other stuff/cleanup here
(function() { toggleModal(); }).delay(500); // removes the layer itself after fade done
}
}
});
// the function also returns the object so you can tweak it from the outside:
toggleModal("#fff").adopt(new Element("div", {"class": "intro", text: "Hi from modal land!"}).addClass("modals");
I hope somebody finds this useful. Please be aware that IE applies transparency using a filter:opacity but has been known to have issues allocating memory for the filter. As a result if you modal a very long page (like this blog), transparency in IE7 may be lost. There’s another school of thought that goes, a modal should disallow scrolling and focus on the visible screen area only, which works around this issue. I will post an updated / alternative function as soon as I can.
