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

您只需在对象映射中定义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 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

回答其中一个问题：

如果要为所有使用的模态设置一次选项，可以使用：

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

Answer 4

最简单的方法是结合他提供的两个例子here：

//打开动画

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

SimpleModal和Jquery（如何打开和关闭动画）？

4 个答案: