MooTools Overlay Plugin

Discussion

1. Timothy

   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.
2. Azterik Media

   Very nice! Thanks for the post.
3. Marc Fowler

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

   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 domready call and just call window.Overlay.show/hide when I needed to cover the whole window.

   Good stuff
5. Adriaan

   @Timothy: please give a link to your class…
6. Adam Meyer

   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');
   
7. Richard

   Great stuff indeed! :D
8. olivier

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

   @ 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).
10. freetutorial

    hi , very nice posting, please post more like this
11. Crispijn

    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!
12. David Walsh

    @Crispijn: Seems like an edge case.
13. Crispijn

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

    @Crispijn: Not so much about effort as it is about adding extra code. I may extend the class in the future to do more advanced things.
15. theodore

    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();				
    	});
    
16. John

    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
17. David Walsh

    @John: Your “olay” variable has lost scope. You need to give the olay variable global scope for your stuff to work, although I don’t advise it.
18. William Ghelfi

    Hello, I’m in the same camp with theodore up there…
    Can’t figure out how to have non-trasparent elements inside the overlay…

    Any hint will be very appreciated :)

    Bau,
    Wiz
19. Thorsten

    After hiding the overlay again and resizing the window it causes nasty scrollbars as the hidden overlay is keeping the old window width. (tested on mac -> FF and safari)

    Anyone here with a workaround to fix this?
20. piotr

    Is there any way to use the overlay without an animation?
    I’d like to have overlay.set() on ‘domready’ and use overlay.start() on ‘load’.

    This is what I’ve tried, somehow this.tween.set() just doesn’t work:

    Overlay.implement({
    set: function() {
    this.fireEvent(‘set’);
    this.tween.set(this.options.opacity);
    }
    });
21. Paddy

    Hi,
    how i can set the opacity of my content box “text” to 100%?

    var test = new Element('div', {
        'styles': {
              'background-color': '#FFF',
                'width': 300,
    'height': 200,
    'position': 'absolute',
    'top': 10,
    'left': 200
        },
    'html': 'test'
    });
    
    $('overlay').grab(test);
    

    thanks
22. Sky

    It has a bug in it –

    on high resolution screens (above 1440×900) the dark area on your Demo does not cover entire page. There can be a huge gap on right.
23. Crispijn

    @Sky: does this appear after you’ve changed the window size? This is correct. You can change this by adding a onResize event to the class.
24. Han Solo

    Hi there,

    is there any possibility to fix the content of the first div layer while this overlay is open (and scrollable), and make it scrollable again when the overlay is closed?

    I’m a absolute beginner in terms of HTML, JS and CSS. But what I did so far is set up a HTML file with linked images. This page is scrollable. When I click on a image I use your Overlay script to fade-in a dark background make a hidden div visible. This div contains either text, several images or flash video. I use onShow document.getElementById("overlaycontent").style.display = 'block'; onClose I use document.getElementById("overlaycontent").style.display = 'none'. This works so far.

    But how can I make the lower content div unscrollable while the overlay is scrollable and on close the other way round? I tried to use document.getElementById("content").style.position = 'fixed'. But than the background jumps to the first position. It should be fixed at the current scroll position. Any idea?

    I hope you got me :)
25. false

    @Crispijn: Hi, did you tried to add a ‘onResize’ event to your overlay class ? If yes, what did you do in this event ? Because i have this issue and i would like to solved it :/ but fail

    ty :)
26. aschemel

    how can i embed a html in the overlay, i want the overlay to carry a form, so i can edit some text fields? I new in web developing =D
27. bobgodwin

    How do I change “shower” to a class instead of an id. I’d like to use it on several links.