javascript - 在 gridview 中弹出更多详细信息？

Question

我有一个列出项目的 gridview。我想要做的是单击一个链接，该链接将打开一个弹出窗口以显示特定项目的更多详细信息。到目前为止，我已经设法创建了一个弹出式 Div 标签，它将显示在 GridView 中选择的产品的详细信息。目前，使用 Gridview 外部的超链接打开 Div 标签。当我尝试将链接放在 gridview 中的模板字段中时，弹出窗口不会打开。

这是弹出div的javascript

<script type="text/javascript">
$(document).ready(function () {
    $("#OpenDialog").click(function () {
        $("#dialog").dialog({ modal: true, height: 400, width: 500 });
    });
});
</script>

div标签

<div id="dialog" title="CPU Details" onload="false" style="display: none" >

然后使用放置在 gridview 外部的以下内容打开 div 标签。

<a id="OpenDialog" href="#">Click here to open dialog</a>

Answer 1

这样做可以看到 css 选择器的神奇之处。

标记

          <ItemTemplate> 
                <asp:LinkButton ID="lblId" runat="server" Text='<%# Bind("Id") %>' CssClass="opener"></asp:LinkButton> 
            </ItemTemplate> 

 <div class="dialog" title="My details" >
    Details here
</div>

JqueryCode

$(document).ready(function () {
 $(".opener").click(function () {
          $(".dialog").dialog("open");
          return false;
      });
  });

我已经为您保存了一个工作示例 here它有照顾更新面板的好处。享受吧。