MooTools Overlay Plugin

Not bad. I have a custom class I’ve set up which does the same thing. It shows a veil over the page with a ‘Loading’ status at the top left.

I use mine whenever I am doing an Ajax request, to prevent users from doing anything to page.

Mine has the following methods:
Loading [+ 1 to loading queue, brings up veil if needed]
loaded [-1 to loading queue, hides veil if queue is empty]
toggle [if no veil, calls loading. if veil, calls loaded]
lock [+1 to lock queue, keeps veil up even if loaded]
unlock [-1 to lock queue, hides veil if no locks or loads]
toggleLock [if locked, calls unlock. if not locked, calls lock]
lightsOff [makes veil mostly opaque]
lightsOn [back to default transparency]
toggleLights [toggles lightsOn / lightsOff]
forceOff [clears queues, hides veil]
timeless [no timeout on veil]
timed [back to default, where veil calls forceOff after 90 seconds]
toggleTimed [toggles timed / timeless]

Also, when loading the veil has a z-index of 20. When locked it has a z-index of 10. These can be overridden in the options.

I do use a small amount of HTML in the footer, since I have a loading image next to ‘Loading.’ You could avoid this by not using the image and injecting the elements via DOM on init.

Very nice! Thanks for the post.

Why not just use http://mootools.net/docs/more/Interface/Mask ?

Nice. I love the perceived simplicity of the code, but it is full-featured — it does one thing and does it well.

To reuse the same instance I would do a window.Overlay = new Overlay(..) in a dom ready call and just call window.Overlay.show/hide when I needed to cover the whole window.

Good stuff

@Timothy: please give a link to your class…

Why not do more of this in css?

All of my overlays are just css.

background: black;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;

Even the transparency can be done in css.

Granted position:fixed may not work 100% in IE6, but come on… it’s IE 6.

I like this better because it works better when resizing the window. (JS is too slow in IE and FF … IMO)

For the fade in I just do something like:
fade(‘hide’);
fade(‘in’);

Great stuff indeed! :D

isn’t there already a class for this in mootools’ More?

@ olivier & Marc Fowler
You can in a way say that More already does have such class – though there’s differences between them.

A short comparison of the two versions:

Mask version:
- No support for Fx
- Size is calculated by .getSize()
- Ability to add a mask over a specific Element through .mask()
- IframeShim-support, to fix IE6’s issue with selectboxes, flash etc

David’s version:
- Support for Fx, giving ability to use fade-in/out
- Size is calculated by .getScrollSize()
- Much more simplified, does exactly what it’s supposed to

Since Mask uses .getSize(), it gives issues if the user manages to scroll down the page. Both versions have a small issue if switching between normal and fullscreen-view though, where the size of the mask aren’t updated like it probably should (if mask is put inside the document.body).

hi , very nice posting, please post more like this

Maybe you should add an window.resize function to it so your overlay is always the correct size!

But nice plugin, I just needed this!

Yeah… I thought: Small tweak, and more effort but it isn’t necessary indeed.

Hi, very nice! I just used it to generate a greeting card for my home page (see below) and it works very well except one minor issue…the new image element created upon ‘onShow’ was also faded out (even if a z-index had been set for the image to >5000). How to make the image remains original? Thanks and happy new year!


window.addEvent('domready',function() {
new Overlay(document.body, {
duration: 400,
opacity: 0.5,
onShow: function() {
new Element('img', {
'id': 'greetingcard',
'src': '2010.jpg',
'width': 800,
'height': 400,
'styles': {
'position': 'absolute',
'top': 100,
'left': 200
}
}).inject(document.body);
},
onClick: function() {
$('card').destroy();
this.close();
}
}).open();
});


Hello i have problem, i want to use the overlay by calling of a funtion:

window.addEvent(‘domready’,function() {
var olay = new Overlay(document.body, {
duration: 400,
onClick: function() { this.close(); }
});
});

//Change DIV tab
function showDiv(t){
if(t==1){
document.getElementById(‘Div’).style.display=’block’;
olay.open();
}
if(t==0){
document.getElementById(‘Div’).style.display=’none’;
olay.close();
}
}

But i give a error:

olay is not defined: olay.open();

Please help me.

Thanks