堆叠式 jQuery UI 对话框

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，但其 style 属性中仍然有“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 上创建了一个简化的示例。您可以在此处找到它。有什么帮助吗？

Answer 1

通过将第二个 div id（及其引用）更改为“foo”，我能够让您在 jsbin 上的示例正常工作。我怀疑发生了某种名称冲突——也许 Javascript 或 div id 中的变量名称上存在最大数量的有效字符？ （简单搜索了一下，但我似乎找不到任何地方的说明）。