Question

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

这是pop up 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" >

然后使用以下格式打开div标签，该标签位于gridview之外。

<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提供了一个工作示例，其中包含了更新面板的奖励。很高兴。

Answer 2

尝试以下方法：

$(document).ready(function () {
$("#OpenDialog").click(function (e) {
    $("#dialog").dialog({ modal: true, height: 400, width: 500 });
return false;
  });
});

让我知道它是否适合你。

<强>已更新

添加一个类来链接：

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

现在

$(document).ready(function () {
$('.OpenDialog').click(function (e) {
    $("#dialog").dialog({ modal: true, height: 400, width: 500 });
return false;
  });
});

试试这个肯定会对你有用，因为当在html中呈现时，gridview中的控件ID已经改变。

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

2 个答案: