Всплывающие окна для получения дополнительной информации в виде сетки?

Question

У меня есть сетка, в которой перечислены элементы. То, что я хочу сделать, - это щелкнуть ссылку, которая откроет всплывающее окно, чтобы показать дополнительную информацию для конкретного элемента. До сих пор мне удалось создать всплывающий тег Div, который покажет детали продукта, который выбран в виде сетки. В настоящее время тег Div открывается с помощью гиперссылки вне Gridview. Когда я пытаюсь поместить ссылку внутри поля шаблона в gridview, всплывающее окно не открывается.

Это 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

попробуйте следующее:

$(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; 
    }); 
}); 

попробовать это будет определенно работать для вас, как когда идентификаторы контроля изменились в GridView когда он отображает в html.

Answer 2

Сделайте это таким образом, чтобы увидеть чудеса селекторов css.

Mark Up

  <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; 
     }); 
    }); 

Я dropboxed рабочий пример для вас here, который имеет бонус заботиться о обновление panels.Enjoy.