fading in/out modal using aui-modal - modal-dialog

Question

I'm using YUI and the alloyUI component aui-modal. This works fine but would be much nicer if it faded into view on open and faded out on close. Does anyone know how I can achieve this? Better yet would be to slide down on open and slideOut on close - similar to the jquery twitter Bootstrap modal. here is my code:
<div id="modal"></div>
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal(
{
bodyContent: 'Modal body',
centered: true,
headerContent: '<h3>Modal header</h3>',
modal: true,
render: '#modal'
}
).render();
});

Answer 1

For easy fadeIn/fadeOut animations, you can simply plug the WidgetAnim plugin to your modal instance. This will by default fade in and out your modal with a duration of 0.2 seconds.
<div id="modal"></div>
YUI().use('aui-modal', 'widget-anim', function(Y) {
var modal = new Y.Modal(
{
bodyContent: 'Modal body',
centered: true,
headerContent: '<h3>Modal header</h3>',
modal: true,
render: '#modal'
}
).render();
modal.plug(Y.Plugin.WidgetAnim);
});
Additionally, you can change the default fade animation using the animShow and animHide attributes (note that you'll need the 'anim' module for this):
modal.plug(
Y.Plugin.WidgetAnim,
{
duration: 0.5,
animHide: new Y.Anim(
{
duration: 0.5,
easing: Y.Easing.easeIn,
node: modal.get('boundingBox'),
to: { xy: [modal.get('boundingBox').getXY()[0], -500] }
}
),
animShow: new Y.Anim(
{
duration: 0.5,
easing: Y.Easing.elasticOut,
from: { xy: [modal.get('boundingBox').getXY()[0], -500] },
node: modal.get('boundingBox'),
to: { xy: modal.get('boundingBox').getXY() }
}
)
}
);