Gallery
Eric Ferraiuolo
YUI Developer
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
No forum posts for this module.
© 2006-2011 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info