1

我有一个列出项目的gridview。我想要做的是单击一个链接，该链接将打开一个弹出窗口以显示特定项目的更多详细信息。到目前为止，我已经设法创建了一个弹出式 Div 标签，它将显示在网格视图中选择的产品的详细信息。目前，使用 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>
4

2 回答 2

3

这样做可以看到 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>

查询代码

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

我在这里为您提供了一个工作示例，它具有处理更新面板的好处。享受。

于 2013-04-30T12:34:38.207 回答
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 发生了变化。

于 2013-04-30T11:10:08.370 回答