SimpleModal and Jquery (How to do open and closing animations)?

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

There's two examples near the bottom of the page that show how to either do open or closing animations.

I'm pretty new to jquery. How can I declare both onOpen and onClose? (I've only been able to get one to work at a time.

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

});

Thanks for any help you can provide.

You just need to define the onOpen option in your object mapping:

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

Or, you can declare the callbacks in the function call like you did in your post:

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

After reading your latest comment, I agree with ryanulit. However, here's one solution to achieve what you've described. You could do something like this for contact and register links:

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

You could do something like this:

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

Answer to one of the questions:

If you want to set an option once for all modals to use, you can do it with:

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

The easiest way to do this is to just combine the two examples he provides here:

// Opening animations

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

// Closing animations

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

// Combined animations

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