Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Overlay Extras (gallery-overlay-extras) on cdn

Last Updated: 05/4/11

+ 8 -

Eric Ferraiuolo

YUI Developer

See 9 more by this user.

Created: 05/10/10
Last CDN Push: 05/4/11
Build Tag: gallery-2011.05.04-20-03
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

This is a collection of Plugins to be used with Overlays. I found myself replicating this code over-and-over for each Overlay instance so I decided to roll them up into one module.

Modal masks the underlying content making the Overlay the only thing that the user can interact with.

KeepAligned maintains the Overlay's position during window-resize and scrolling.

AutoHide will hide the Overlay if the user clicks or focuses on an element outside of the Overlay or presses the escape key. These three events can be turned on/off via configuration attributes: clickedOutside, focusedOutside, pressedEscape; all booleans.

Tags:
ericf

Create an Overlay, make it animate hide/show, modal, alignment kept on scroll and resize, and hide when clicked outside the Overlay.

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.05.04-20-03'
}).use('node', 'overlay', 'widget-anim', 'gallery-overlay-extras', function(Y){
 
    Y.on('domready', function(){
 
        var overlay = new Y.Overlay({
 
            bodyContent : '<p>I’m an Overlay</p>',
            width       : '400px',
            height      : '200px',
            zIndex      : 100,
            centered    : true,
            constrain   : true,
            render      : true,
            visible     : false,
            plugins     : [
 
                Y.Plugin.OverlayModal,
                Y.Plugin.OverlayKeepaligned,
                { fn: Y.Plugin.OverlayAutohide, cfg: {
                    focusedOutside : false  // disables the Overlay from auto-hiding on losing focus
                }}
 
            ],
 
        });
 
        Y.one('button').on('click', Y.bind(overlay.show, overlay);
 
    });
 
});

Forum Posts

Subject	Author	Date
Feature request	Anthony Pipkin	05/12/10
Re: Feature request	Eric Ferraiuolo	05/13/10
Re: Feature request	Anthony Pipkin	05/13/10
Not working in 3.1.1	Swami	05/20/10
Re: Not working in 3.1.1	Eric Ferraiuolo	05/21/10
Re: Not working in 3.1.1	Swami	05/21/10
Re: Not working in 3.1.1	Eric Ferraiuolo	05/21/10
Re: Not working in 3.1.1	Swami	05/21/10
Re: Not working in 3.1.1	Eric Ferraiuolo	05/21/10
Re: Not working in 3.1.1	Swami	05/21/10