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

You could create your own widget extending $.ui.dialog to add overlay show and hide animations with accurate configuration using option.

Another lacking functionality to close dialog by click on overlay is also easily added:

in some file, say jquery-ui.fsrc.dialog.js:

(function( $, undefined ) {

$.widget('fsrc.fsrc_dialog', $.ui.dialog, {
open: function() {
    // some helpful vars
    var self = this,
        options = self.options;

    // call parent method - it will create overlay and save it in self.overlay variable
    var ret = $.ui.dialog.prototype.open.apply(this, arguments);

    if (options.showOverlay) {
        // immediately hide and animate overlay
        // kind a hack, but jquery ui developers left no better way
        self.overlay.$el.hide().show(options.showOverlay)
    }
    if (options.closeOnOverlay) {
        // close dialog on click on overlay
        self.overlay.$el.click(function() {
            self.close();
        })
    }
    return ret;
},
close: function(event) {
    var self = this,
        options = self.options;

    if (options.hideOverlay) {
        // save and unset self.overlay, so it will not be destroyed by parent function during animation
        var overlay = self.overlay
        self.overlay = null;
        overlay.$el.hide(options.hideOverlay, function() {
            // destroy overlay after animation as parent would do
            overlay.destroy();
        })
    }

    // call parent method
    var ret = $.ui.dialog.prototype.close.apply(this, arguments);
    return ret;
}
});

}(jQuery));

In page:

`

I named namespace, widget and options to my favor.

Tested jquery1.7.2, jquery-ui1.8.19, IE9, ff11, chrome18.0.1025.168m, opera11.61