модальное затухание / исчезновение с использованием aui-modal

Я использую YUI и компонент allUI aui-modal. Это работает нормально, но было бы намного лучше, если бы он исчезал при открытии и исчезал при закрытии. Кто-нибудь знает, как я могу этого добиться? Еще лучше было бы скользить вниз при открытии и slideOut при закрытии - аналогично модальному модулю jquery twitter Bootstrap. вот мой код:

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

modal-dialog yui3 alloy-ui
person Karma Kaos    schedule 15.05.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Для легкой анимации постепенного появления/исчезновения вы можете просто подключить WidgetAnim. плагин к вашему модальному экземпляру. Это по умолчанию будет постепенно появляться и исчезать в вашем модальном окне с продолжительностью 0,2 секунды.

<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);
});

Кроме того, вы можете изменить стандартную анимацию затухания с помощью animShow и атрибуты animHide (обратите внимание, что вам понадобится модуль 'anim' для этого):

    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() }
                }
            )
        }
    );
person jbalsas    schedule 16.05.2014