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

Question

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.

Answer 1

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

Answer 2

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 3

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