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 currently it feels kind of like getting a punch straight to the face when a dialog is shown.

FWIW, this is the CSS I'm using at the moment:

.ui-widget-overlay {
    background: black;
    opacity: 0.5;
    filter: alpha(opacity = 50);
    position: absolute;
    top: 0;
    left: 0;
 }

Answer 1

I guess this can help you out, skorpan http://docs.jquery.com/Effects/fadeTo#speedopacitycallback

Answer 2

You could also add this to fadeIn the modal:

$(loginForm).dialog({
        resizable: false,
        open: function(){
            $('.ui-widget-overlay').hide().fadeIn();
        },
        show: "fade",
        hide: "fade" 
});

Hope this helps :)