Fade in overlay in modal dialog

Question

I have a JQuery UI dialog which is modal and has a black background with 50% opacity. Is it possible to make the background opacity fade from 0% to 50%? If so, how? Because c

Answer 1

This is an expansion on Liam Potter's answer. His works great for the fade in, but doesn't handle the fade out. I found this the easiest way to make the background also fade back out:

beforeClose: function(){
    $('.ui-widget-overlay:first')
        .clone()
        .appendTo('body')
        .show()
        .fadeOut(400, function(){ 
            $(this).remove(); 
        })
    ;
}

You can't do this in the "close" method because jQuery has already removed the '.ui-widget-overlay' container, however by cloning it to just do the fade you can sidestep their removal and still make use of all the default styles.