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

Just a minor improvement on Liam Potter's answer. If you want the overlay to be full-screen then you might change his code to use the $(document).height() and $(document).width() instead of the body, because the latter be measured smaller than the visible area.

open: function(){
    $('.ui-widget-overlay').hide().fadeIn();
},
beforeClose: function(){
    $('.ui-widget-overlay').remove();
    $("
", {
        'class':'ui-widget-overlay'
    }).css({
        height: $(document).height(),
        width: $(document).width(),
        zIndex: 1001
    }).appendTo("body").fadeOut(function(){
        $(this).remove();
    });
}