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

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 :)

Answer 2

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.

Answer 3

I know this is an old question, but I came across it just now in a search, and feel I could help other people.

This could be improved I'm sure but this will fade in and out your overlay when using a jQuery UI dialog.

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

Answer 4

You can use the jQuery fadeTo() function. More information can be found on the link below. http://docs.jquery.com/Effects/fadeTo#speedopacitycallback

Answer 5

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();
    $("<div />", {
        'class':'ui-widget-overlay'
    }).css({
        height: $(document).height(),
        width: $(document).width(),
        zIndex: 1001
    }).appendTo("body").fadeOut(function(){
        $(this).remove();
    });
}

Answer 6

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:

<script src='/js/jquery-ui.fsrc.dialog.js' type='text/javascript'></script>
<script type="text/javascript">
<!--
    jQuery(document).ready(function(){
        jQuery('#show').click(function(){
            jQuery('#order_form_container').fsrc_dialog({
                modal: true,
                closeOnOverlay: true,
                show: {effect: "fade", duration: 500},
                showOverlay: {effect: "fade", duration: 500},
                hide: {effect: "fade", duration: 300},
                hideOverlay: {effect: "fade", duration: 300},
            });
        })
    })
-->
</script>`

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