jQuery-UI Dialog Memory Leaks

Question

I\'m working with IE7 and some jQuery dialogs and I\'m running into about a 6meg leak per dialog opened. I\'m assuming it\'s to do with closures, but so far everything I\'ve

Answer 1

Hope this helps, I created an extension for this issue where I use the jQuery tools (flowplayer) expose plugin when modal = true for the jQuery UI dialog.

I would include the folhttp://jsfiddle.net/yZ56q/lowing code in a separate .js file and make sure to include the jQuery tools expose plugin prior, from this site...http://flowplayer.org/tools/download.html.

(function($) {
    var _init = $.ui.dialog.prototype._init;
    $.ui.dialog.prototype._init = function() {
        var self = this;
        _init.apply(this, arguments);

        // Remove the default modal behavior and exhibit the new one
        if (self.options.modal) {
            self.options.modal = false;
            self.options.isModal = true;
        }

        this.uiDialog.bind('dialogopen', function(event, ui) {
            if (self.options.isModal) {
                if ($(this).expose == null)
                    window.alert("Dialog box depends on the expose plugin to be modal. Please include the jquery tools Javascript include.");
                else {
                    $(this).expose({ opacity: 0.3
                            , color: '#CCCCCC'
                            , loadSpeed: 0
                            , closeSpeed: 0
                            , closeOnClick: false
                            , closeOnEsc: false
                            , api: true
                    }).load();
                }
            }
        });

        this.uiDialog.bind('dialogfocus', function(event, ui) {
            if (self.options.isModal) {
                $(this).css('z-index', '9999');
            }
        });

        this.uiDialog.bind('dialogclose', function(event, ui) {
            if (self.options.isModal) {
                if ($(this).expose != null) {
                    $(this).expose({ api: true }).close();
                }
            }
        });
    };

        $.ui.dialog.defaults.isModal = false;
})(jQuery);

Answer 2

It actually ended up being caused by how the jQuery UI framework deals with graying out the background when displaying a modal. If I remove the modal = true and the overlay attributes the memory leak goes down to ~100k.

To get around this I had to make the dialog without the modal option, and then add a div myself to the page (fixed position top, left, bottom, right all 0 with a alternating gray pixel then transparent pixel background) and showing and hiding that with a zindex just under the dialog.

While it isn't ideal (the default modal overlay was nice and smooth looking) it's better than leaking that much memory per dialog I pop up.