Fancybox叠加

Question

我正在使用一个精美的盒子iframe来创建一个叠加层来显示另一个页面的内容。我有一个webhierarchicaldatagrid，并在单击模板列链接时创建叠加层。它似乎仅适用于网格的第一行，而对于所有其他行，它只是打开页面而没有任何覆盖。我在代码中缺少任何内容。以下是我正在使用的代码：

          <ig:TemplateDataField Key="Sipoc" Width ="06%">
    <ItemTemplate>
   <a class="iframe" id="ifrm" href="<%# String.Format("Sipoc.aspx?proj_id={0}&func_id={1}&subfunc={2}&jurisdiction_id={3}&proj_name={4}&owner_id={5}", Eval("Proj_Type_ID"), Eval("Function_Name"), Eval("Sub_Function_Name"), Eval("Jurisdiction_Name"),Eval("Proj_Type_Name"),Eval("Proj_Type_Owner_ID")) %>">

     <asp:Image ID="Image1" ImageUrl='<%# Convert.ToString(Eval("Sipoc")) == "True"? "Sipoc.jpg": " " %>' runat="server" Visible='<%# Convert.ToString(Eval("Sipoc")) == "True"? true: false %>' ></asp:Image>          
          </a>

            </ItemTemplate><header Text="Sipoc" />
            </ig:TemplateDataField>



          $(document).ready(function () {
           $("#ifrm").fancybox({
               'width': '100%',
               'height': '100%',
               "padding": 0,
               "overlayShow": true,
               "overlayOpacity": 0.5,
               "zoomSpeedIn": 500, // has nothing to do with AJAX-ZOOM
               "zoomSpeedOut": 500, // has nothing to do with AJAX-ZOOM
               "hideOnContentClick": false, // important

               "centerOnScroll": false,
               "imageScale": true,
               "easingIn": "swing",
               "easingOut": "swing"
           });


       });