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 Modal Plugin (gallery-overlay-modal) on cdn

Last Updated: 12/8/10

+ 4 -

Eric Ferraiuolo

YUI Developer

See 9 more by this user.

Created: 11/5/09
Last CDN Push: 05/21/10
Build Tag: gallery-2010.05.21-18-16
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0 PR1
Free for use.

UPDATE: This module is being phased out in favor of Overlay Extras.

Sometimes an Overlay needs to be modal; in that the user must interact with it. This is a Plugin for Overlay to add modal support via a mask.

The user will be unable to click-on or tab-to any elements besides the Overlay and its children.

Tested with A-Grade browsers.

Plugin's Namespace: modal.

The DOM node which asks as the mask is transparent by default (which makes the mask ineffective in IE), it's up to the implementer to style the mask-node.

yui3-overlay-modal CSS class is added to the Overlay's boundingBox. A new DOM node with the class yui3-overlay-mask is added as the first child of the body (to help support IE); this is the mask-node.

The mask-node could be styled as such:



.yui3-overlay-mask {

    background: #fff;

    opacity: 0.5;

    filter: alpha(opacity=50);

}/* better IE6 support */

body { _height: 100%; }

Code Sample

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

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.05.21-18-16'
}).use('gallery-overlay-modal', function(Y) {
 
	var myOverlay = new Y.Overlay().plug(Y.Plugin.OverlayModal).render();
 
	// to remove the masking and modality
	// myOverlay.unplug(Y.Plugin.OverlayModal);
 
});

Forum Posts

Subject	Author	Date
Why OverlayManager does not work with Panel?	Ahmed Sabri	12/3/12
Re: Why OverlayManager does not work with Panel?	Sebastián Gurin	12/3/12
Re: Why OverlayManager does not work with Panel?	Ahmed Sabri	12/3/12
Re: Why OverlayManager does not work with Panel?	Sebastián Gurin	12/4/12
Re: Why OverlayManager does not work with Panel?	Ahmed Sabri	12/4/12