Jquery ui 基于相同<；的两个不同jQuery UI对话框；部门>；

我有一个表单，当用户点击这个或那个元素时，它会在模式对话框中弹出。根据所点击的内容，对话框的行为应该略有改变。例如，默认情况下，对话框应同时具有[OK]和[Cancel]按钮，以及右上角的[X]close按钮。但有时我希望隐藏[X]和[Cancel]按钮，禁用escape。表单ID和字段集保持不变

我尝试了以下方法：

    var dlg1 = $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });

    var dlg2 = $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        dialogClass: 'noCloseButton',
        closeOnEscape: false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });

    $("#button1").click( function() {
        dlg1
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

    $("#button2").click( function() {
        dlg2
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

var dlg1 = function() {
        return $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    })
    }

    var dlg2 = function() {
        return $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        dialogClass: 'noCloseButton',
        closeOnEscape: false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });
    }

    $("#button1").click( function() {
        dlg1()
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

    $("#button2").click( function() {
        dlg2()
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

现在，问题是，如果我点击按钮1显示dlg1，然后关闭它，然后点击按钮2，选项不会改变。显示的对话框仍有dlg1中的选项。反之亦然，如果先显示dlg2，则button1处理程序不会覆盖对话框选项。我错在哪里？先谢谢你

由于在8小时之前不允许回答自己的问题，我正在编辑该问题以提供答案：

好吧，我已经弄明白了。我最后做了以下几件事：

    var dlg1 = $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });

    var dlg2 = $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        dialogClass: 'noCloseButton',
        closeOnEscape: false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });

    $("#button1").click( function() {
        dlg1
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

    $("#button2").click( function() {
        dlg2
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

var dlg1 = function() {
        return $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    })
    }

    var dlg2 = function() {
        return $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        dialogClass: 'noCloseButton',
        closeOnEscape: false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });
    }

    $("#button1").click( function() {
        dlg1()
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

    $("#button2").click( function() {
        dlg2()
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

---

就这样！谢谢大家的帮助。

关闭对话框时，请尝试使用

销毁
方法

关闭对话框时，请尝试使用
销毁方法

在每次调用之前尝试使用.dialog（“destroy”）方法。这将给您一个新的开始。
在每次调用之前尝试使用.dialog（“destroy”）方法。这将给你一个新的开始。
（来自内存）

您使用的是同一个对象来调用对话框。
第一次调用dialog open时，它会抓取div，用参数实例化对话框，并将其放在文档的底部（就在body close标记的上方）

下次调用dialog open时，您会知道具有该id的div之前已实例化，只需将显示设置为block

或者类似的。简单地说，一旦一个div被加载为一个对话框，它就不会在每个对话框中重新加载。打开它只是使其可见。
（从内存中）

您使用的是同一个对象来调用对话框。
第一次调用dialog open时，它会抓取div，用参数实例化对话框，并将其放在文档的底部（就在body close标记的上方）

下次调用dialog open时，您会知道具有该id的div之前已实例化，只需将显示设置为block

或者类似的。简单地说，一旦一个div被加载为对话框，它就不会随着每个dialog.open重新加载，而是变得可见。
最有可能的是jQuery UI在
dialog（'open'）
上延迟加载对话框的初始化，这意味着调用的第一个对话框就是设置的对话框

dialog（'destroy'）
可以工作，但我建议为第二个对话框克隆节点。请参阅。
最有可能的是jQuery UI在
对话框（'open'）
上延迟加载对话框的初始化，这意味着调用的第一个对话框就是设置的对话框

dialog（'destroy'）
可以工作，但我建议为第二个对话框克隆节点。请参阅。
我尝试了建议的想法，我需要在关闭时清除对话框，因为两个不同的对话框使用同一个div。删除整个div将确保第二个对话框实际上不会再次显示第一个对话框。在我的情况下，销毁方法不起作用

close: function(ev, ui) {
    $(this).remove();
}

在初始化对话框时，我正在向主体添加一个div，如果不创建一个div来填充对话框，这可能不起作用

这对我有用。现在我可以在同一页上打开不同内容的对话框，而上一个对话框不会对新对话框产生任何影响。
我尝试了建议的想法，我需要在关闭时清除对话框，因为两个不同的对话框使用同一个div。删除整个div将确保第二个对话框实际上不是第一个对话框，只是再次显示。在我的情况下，销毁方法不起作用

close: function(ev, ui) {
    $(this).remove();
}

在初始化对话框时，我正在向主体添加一个div，如果不创建一个div来填充对话框，这可能不起作用

这对我有用。现在，我可以在同一页上打开不同内容的对话框，而上一个对话框对新对话框没有任何影响。
是的，我以前也尝试过，但对话框在被破坏后却没有显示出来。是的，我以前也试过，但对话框在被破坏后，什么地方都没有出现。这为我指明了正确的方向，谢谢。问题是“我错在哪里？”，这就是答案。这为我指明了正确的方向，谢谢。问题是“我错在哪里？”，这就是答案。