javascript - jQuery 对话框，如何绑定(bind)窗口调整大小事件但仅当对话框存在时

Question

我正在使用 jQuery UI 模式对话框。我希望对话框固定在屏幕中间，并在浏览器上调整大小以自动更新位置。事实证明，默认情况下这是不可用的。

所以我所做的是:

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");
        });


    }
});

注意:

            console.log('resizing);

这里的问题是，虽然此方法有效，但当对话框关闭时，调整大小事件仍在触发。如何使其成为与对话框关联的绑定(bind)，以便当对话框被销毁时，绑定(bind)也会被销毁？

谢谢

Answer 1

对话框关闭时，您必须取消绑定(bind)调整大小事件:

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