jquery - 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

您只需要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
    }
 });

Answer 3

回答以下问题之一：

如果你想为所有模态设置一次选项，你可以这样做：

$.modal.defaults.onClose = function (dialog) {
     // your code
     $.modal.close();
}

Answer 4

阅读您的最新评论后，我同意 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... */ });
});