javascript - gridviewのハイパーリンクフィールドをクリックするとfancyboxを開く

Question

Hyperlinkfield を持つ Gridview があります。そのフィールドがクリックされると、派手なボックスが開き、その派手なボックスで iframe にハイパーリンク フィールドを開く必要があるページを表示する必要があります。

私のグリッドビューは次のとおりです。

<asp:GridView ID="GridView" runat="server" AutoGenerateColumns="False"DataKeyNames="SrNumber"
                    OnRowDataBound="GridView2_RowDataBound" 
                    Width="100%"
                    ShowFooter="false"
                    EnableViewState="false"
                    AutoPostBack="true">
                    <Columns>
      <asp:HyperLinkField DataNavigateUrlFields="SrNumber" DataNavigateUrlFormatString="newpage.aspx?SrNumber={0}" DataTextField="Note"  HeaderText=""/>
                   <asp:TemplateField HeaderText="Note" SortExpression="Note">
                   <ItemTemplate>
                       <a id="ahrefclick" class="forPopup"  href="newpage.aspx?SrNumber  <%#Eval("SrNumber")%>"><%#Eval("Note")%></a>
                   </ItemTemplate>
                   </asp:TemplateField>
                    </Columns>
                </asp:GridView>

現在、列は 2 つしかなく、どちらも実際には同じです。ハイパーリンク ファイルが次のページに移動します。そして、テンプレートフィールドを使用してグリッドビューにファンシーボックスロジックを追加しようとしています。

JavaScriptコードは次のとおりです。

 $("#ahrefclick").click(function (e) {

        $(".forPopupGrid").fancybox({
            'titlePosition': 'inside',
            'transitionIn': 'elastic',
            'transitionOut': 'none'
        });
    });

ファンシーボックスを初めて使用するので、まだポップアップが表示されません。助けてください!

ありがとう！

編集:私のjqueryとfancyboxのリンクは次のとおりです:

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js" type="text/javascript"></script>

    <link href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" rel="stylesheet"
        type="text/css" />