Jquery 对话框大小调整仅在第一次打开时发生

Question

我有一个JQuery的代码，一个div的对话框，包含一个加载任务列表的网格视图。对话框可以适应内容，但如果加载了数百个任务，对话框会变得太大，无法手动调整大小，所以我需要编写一种方法，使其以可管理的大小打开。

在有人建议之前，我试着将div的max-height属性设置为500px，效果很好，只是如果对话框超过500px，div就不会填充整个对话框，这是我们希望的，而不是在对话框打开时。当对话框打开得比屏幕还大时，这是无法做到的。

因此，我写了这段代码来声明对话框，如果加载了20多个任务，对话框的大小应该调整为500px高。这样一来，里面的div就会一直完全填充对话框，并且对话框大小保持可管理状态。

function ShowReferedTasks(title, s, taskCount) {
    //On crée le dialog à partir de la même div       
    $('#litReferedTasks').dialog({
        autoOpen: true,
        modal: true,
        resizable: true,
        show: 'drop',
        hide: 'drop',
        width: 800,
        minHeight: 0,
        title: 'Tâche' + s + ' référée' + s + ' de ' + title
    });
    //if more than 20 refered tasks are found
    if (taskCount > 20) {        
        $('#litReferedTasks').dialog('option', 'height', 500);
        $('#litReferedTasks').dialog('option', 'position', 'center');
    }
}

这段代码是从父网格视图的每一行中的一个按钮调用的，加载每一行的任务。

以下是当我刷新页面并刷新缓存（ctrl+F5），然后打开一些任务列表时会发生的情况。

1. 如果我打开一个包含20个以上任务的任务列表（需要刷新的对话框），效果良好。

2. 如果我打开任何任务列表，即使是不需要调整大小的任务少于20个的任务列表，然后关闭它，打开一个任务多于20个的列表，对话框打开，网格视图完全填充，但调整大小不起作用，对话框太大，无法放在屏幕上，无法手动调整大小。

基本上，我代码的调整大小部分只适用于刷新页面和刷新缓存后打开的第一个对话框。我认为在第一次打开对话框后，一定要记住一些东西，但我是JQuery和JS的新手，我找不到答案。

<div id="litReferedTasks" style="background-color: White; display: none; overflow:auto; height:95%;">
    <asp:GridView ID="gvReferedTasks" runat="server" OnRowDataBound="gvReferedTasks_RowDataBound" Width="97.5%" Visible="false">        
    </asp:GridView>
    <asp:Label ID="lblNoReferedTasks" runat="server" Visible="false" Width="100%"></asp:Label>
</div>

有什么帮助吗？

Answer 1

好的，所以如果你在对话框打开后设置选项，高度可能不会有效果，但如果你在初始对话框创建代码中输入高度，它应该有一个设置好的高度：

function ShowReferedTasks(title, s, taskCount) {
    var dialogOptions = {
        autoOpen: true,
        modal: true,
        resizable: true,
        show: 'drop',
        hide: 'drop',
        width: 800,
        minHeight: 0,
        title: 'Tâche' + s + ' référée' + s + ' de ' + title
    };
    //if more than 20 refered tasks are found
    if (taskCount > 20) {        
        dialogOptions.height = 500
    }
    //On crée le dialog à partir de la même div       
    $('#litReferedTasks').dialog(dialogOptions);
}

Answer 2

我认为您过于复杂化了.dialog函数。最简单的方法是在autoOpen设置为false的情况下创建一次对话框，而不是每次都尝试重新初始化它。我想你最好有这样的运气：

// Do this once when the document is ready
$(function() {  
    $('#litReferedTasks').dialog({
    autoOpen: false,
    modal: true,
    resizable: true,
    show: 'drop',
    hide: 'drop',
    width: 800,
    minHeight: 0
  });
});
function ShowReferedTasks(title, s, taskCount) {
    $('#litReferedTasks').dialog('option', 'title', 'Tâche' + s + ' référée' + s + ' de ' + title);
    if (taskCount > 20) {        
        $('#litReferedTasks').dialog('option', {
            height: 500,
            position: 'center'
        });
    }
    $('#litReferedTasks').dialog('open');
}