Question

I’ve read the docs but still a bit confused. I have the following:

$(document).ready(function(){
    $('#trynow').click(function(){
    $('#hiddenContent').dialog({ height: 700, width: 600, modal: true });
    });                          
});

that uses the jquery UI library to show a modal box with a form in it. I’d like both the background and modal box to fade in or fade out and I know there the options to do that with jquery and the UI plugin but I’m buggered if I can figure out what wraps what where and in what.

Answer 1

http://jqueryui.com/demos/dialog/ (click on animated dialog on the right).

$('#trynow').click(function(){
    $('#hiddenContent').dialog({
        height: 700,
        width: 600,
        modal: true,
        show: 'fade',
        hide: 'fade'
    });
});

You can also use a different animation on show than on hide. Try using hide: 'explode', it’s really cool.