Question

我的应用程序中有一个模态对话框非常好用。我使用以下功能设置和打开对话框

$(document).ready(function () {
    $("#__gsl_DialogPanel").dialog({
        autoOpen: false,
        resizable: false,
        position: 'center',
        stack: true,
        height: 'auto',
        width: 'auto',
        modal: true
    });
});

function loadDialog(action, id, title, onCloseHandler) {
    $("#__gsl_DialogPanel").dialog("option", "title", title);
    var url = action;
    if (id != "") url = url + "/" + id;
    $.ajax({
        type: "get",
        dataType: "html",
        url: url,
        data: {},
        success: function(response) {
            $("#__gsl_DialogPanel").html('').html(response).dialog('open');
        }
    });
}

现在我需要从上一个对话框中的按钮打开另一个对话框。我创建了另一个div（“__gsl_DialogPanel_2L”）并克隆了设置和打开函数，引用了新对话框，如下面的代码所示

$("__gsl_DialogPanel_2L").dialog({
    autoOpen: false,
    resizable: false,
    position: 'center',
    stack: true,
    height: 'auto',
    width: 'auto',
    modal: true
});

function loadDialog2L(action, id, title, onCloseHandler) {
    $("#__gsl_DialogPanel_2L").dialog("option", "title", title);
    var url = action;
    if (id != "") url = url + "/" + id;
    $.ajax({
        type: "get",
        dataType: "html",
        url: url,
        data: {},
        success: function (response) {
            $("#__gsl_DialogPanel_2L").html('').html(response).dialog('open');
        }
    });
}

问题是第二个对话框根本没有打开。我已经查看过Chrome开发者工具，我可以看到div包含从ajax调用中收到的正确的HTML，但在其样式属性中仍然有“display：none”。

我做错了什么？

更新

这些是使用的div。它们位于BODY标记之后的母版页中。

<!-- Generic Dialog Panel  -->
<div id="__gsl_DialogPanel" style="display:none" title=""></div>
<!-- 2 Level Dialog Panel  -->
<div id="__gsl_DialogPanel_2L" style="display:none" title=""></div>

第二次更新：

我在JSBin上创建了一个简化的示例。你可以找到它here。有什么帮助吗？

Answer 1

我能够通过将第二个div id（和对它的引用）更改为“foo”来让你的jsbin上的例子工作。我怀疑发生了某种名称冲突 - 也许在Javascript或div id中变量名称上有最大数量的重要字符？（简单搜索一下，但我似乎无法在任何地方找到这些内容。）

堆叠的jQuery UI对话框

1 个答案: