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

这里的问题是，当这个工作时，当对话框关闭时，调整大小事件仍在触发。如何使这个与对话框关联的绑定，以便在对话框被销毁时绑定也被销毁？

由于

Answer 1

将此添加到对话框选项中：

close:function(){
    $(window).unbind('resize');
}

Answer 2

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

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

jQuery Dialog，如何绑定窗口调整大小事件，但仅在对话框存在时

2 个答案: