SimpleModal и Jquery (Как сделать анимацию открытия и закрытия)?

Question

http://www.ericmmartin.com/projects/simplemodal/

В нижней части страницы есть два примера, которые показывают, как выполнять анимацию открытия или закрытия.

Я довольно новичок в jquery. Как я могу объявить как onOpen, так и onClose? (Я только смог заставить одного работать одновременно.

jQuery(function ($) {
    $('a.basic').click(function (e) {
        e.preventDefault();
        $('#basic-modal-content').modal(
            {
                onClose: function (dialog)
                {
                    dialog.container.fadeOut('slow', function () {
                    });
                }
            }
        );
    });

});

Спасибо за любую помощь, которую вы можете предоставить.

Answer 1

Самый простой способ сделать это - просто объединить два примера, которые он предоставляет здесь :

// Открытие анимации

$("#sample").modal({onOpen: function (dialog) {
    dialog.overlay.fadeIn('slow', function () {
        dialog.data.hide();
        dialog.container.fadeIn('slow', function () {
            dialog.data.slideDown('slow');   
        });
    });
}});

// Закрытие анимации

$("#sample").modal({onClose: function (dialog) {
    dialog.data.fadeOut('slow', function () {
        dialog.container.hide('slow', function () {
            dialog.overlay.slideUp('slow', function () {
                $.modal.close();
            });
        });
    });
}});

// Комбинированные анимации

$("#sample").modal({onOpen: function (dialog) {
    dialog.overlay.fadeIn('slow', function () {
        dialog.data.hide();
        dialog.container.fadeIn('slow', function () {
            dialog.data.slideDown('slow');   
        });
    });
},
onClose: function (dialog) {
    dialog.data.fadeOut('slow', function () {
        dialog.container.hide('slow', function () {
            dialog.overlay.slideUp('slow', function () {
                $.modal.close();
            });
        });
    });
}});

Answer 2

После прочтения вашего последнего комментария я согласен с ryanulit. Однако вот одно решение для достижения того, что вы описали. Вы можете сделать что-то подобное для контакта и зарегистрировать ссылки:

<a href="#">Contact</a>
<a href="#">Register</a>

Вы можете сделать что-то вроде этого:

$('a[href=#]').click(function(){
    // Will reference 'contact' or 'register'
    var modalType = $(this).text().toLowerCase();
    $('simplemodal-' + modalType).modal({ /* Options... */ });
});

Answer 3

Ответ на один из вопросов:

Если вы хотите один раз установить опцию для всех модалов, вы можете сделать это:

Answer 4

Вам просто нужно определить параметр onOpen в вашем объектном отображении:

function myOpen(dialog){
    // Do something with the dialog
}
function myClose(dialog){
    // Do something else with the dialog
} 
$('#basic-modal-content').modal({ onOpen: myOpen, onClose: myClose });

Или вы можете объявить обратные вызовы в вызове функции, как вы делали в своем посте:

$('#basic-modal-content').modal({
    onOpen: function(){
        // Do something with the dialog
    },
    onClose: function(){
        // Do something else
    }
 });