为什么我的 jQuery 模式弹出窗口不显示？答案

【问题标题】：Why will my jQuery modal popup not display?为什么我的 jQuery 模式弹出窗口不显示？
【发布时间】：2014-05-06 22:08:42
【问题描述】：

我在 asp:DataGrid 中使用 asp:Panel 而不是 div 标签（不确定是否重要），这样我可以创建模式弹出窗口，链接到页面加载时绑定到 DataGrid 的特定数据.

JavaScript/jQuery：

function ShowCommentPanel(caller) {
    $("div[id*='pnlComment'][GroupCoveragePeriodId='" + $(caller).attr("GroupCoveragePeriodId") + "']").dialog({
        width: 350,
        height: 200
    });
}

ASP.NET 标记：

<asp:TemplateColumn HeaderText="Comment">
     <HeaderStyle HorizontalAlign="Center" Width="90px" CssClass="ColorBackground SubHeaderText" />
     <ItemStyle HorizontalAlign="Center" Width="90px" CssClass="DataGridBorder Font11px" />
     <ItemTemplate>
          <div>
               <asp:HyperLink ID="lnkComment" runat="server" CssClass="IconEdit" ToolTip="Add/Edit" />
          </div>
          <asp:Panel ID="pnlComment" runat="server" title="Comment" style="display: none;">
                <asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" Width="300px" Height="100px" />
          </asp:Panel>
     </ItemTemplate>
</asp:TemplateColumn>

C# 服务器代码隐藏（在 ItemDataBound 处理程序内）：

lnkComment.Attributes.Add("GroupCoveragePeriodId", period.GroupCoveragePeriodId.ToString());
                lnkComment.Attributes.Add("onclick", "ShowCommentPanel(this)");
                pnlComment.Attributes.Add("SomeId", period.GroupCoveragePeriodId.ToString());
                txtComment.Attributes.Add("GroupCoveragePeriodId", period.GroupCoveragePeriodId.ToString());
                txtComment.Text = period.Comment;

生成的 HTML 代码截图（来自 Firebug）：

应用程序代码编译正常，页面加载正常，我的 JavaScript/jQuery 函数被成功调用，我的 jQuery 选择器不为空，但它仍然没有显示模式。我不知道为什么没有显示任何模态，因此任何可以为我指明正确方向的建议将不胜感激。提前致谢。

【问题讨论】：

注意：我正在处理的这个项目使用的是过时的 jQuery 版本，尽管我怀疑这是问题所在。它使用的 jQuery 版本是 v1.3.2，对话框功能由 jQuery UI v1.7.2 提供。

标签： c# javascript jquery asp.net jquery-ui-dialog

【解决方案1】：

当此属性实际上位于 a 标记上时，您的选择器正在寻找带有 GroupCoveragePeriodId 的 div 标记（因为我没有看到空格）。

尝试在 div 和 [id... 之间使用空格：

function ShowCommentPanel(caller) {
    $("div [id*='pnlComment'][GroupCoveragePeriodId='" + $(caller).attr("GroupCoveragePeriodId") + "']").dialog({
        width: 350,
        height: 200
    });
}

注意：要知道你的选择器是否有东西，请检查长度是否> 0：alert($("div [id*='pnlComment'][GroupCoveragePeriodID='1'").length)

【讨论】：

抱歉，屏幕截图可能看起来令人困惑，因为我只是碰巧突出显示了顶部 div。面板虽然是带有 a 标签的 div 下方的淡出 div。屏幕截图中的底部（淡出）div 也确实有一个 GroupCoveragePeriodId 属性，所以我认为我的选择器应该找到它。

【解决方案2】：

嗯，这很愚蠢。我不知道在我的 ascx 控件中调试这个问题时我是否做了太多的 Ctrl+Zing，但是在查看 Firefox 控制台之后，我显然收到一个错误，说 .dialog() 不是一个函数。我发誓我添加了对 jquery-ui.js 文件的引用，但我必须在太多 Ctrl+Zing 之后删除它。现在我可以让模态框弹出。很抱歉浪费了大家的时间。

【讨论】：