Question

I’m using the jQuery UI modal dialog. I want the dialog to be fixed positioned in the middle of the screen and on browser resize for the position to auto-update. It turns out this is not available by default.

So what I have done is:

dialog = $('<div id="dialog-content" class="ui-dialog-container"></div>').html('<div class="loading">Loading...</div>').dialog({
    autoOpen: true,
    position: ['center', 130],
    open: function() {

        // Fixed Positioning
        $('.ui-dialog').css({position:"fixed"});

        // Reposition on Window Resize
        $(window).resize(function() {
            console.log('resizing);
            $('.ui-dialog').dialog("option", "position", "center");
        });


    }
});

Notice the:

            console.log('resizing);

The problem here is that while this work,s when the dialog is closed the resizing event is still firing. How can I make this a binding that is associated with the dialog so that when the dialog is destroy the binding is also destroyed?

Thanks

Answer 1

You have to unbind the resize event when the dialog closes:

.dialog({
    ...,
    open: function() {
        ...
        $(window).bind('resize.dlg', function() {
            ...
        });
    }
    close: function() {
        $(window).unbind('resize.dlg');
    }
});