单击gridview的超链接字段时打开一个fancybox

时间:2013-07-25 15:48:35

标签: javascript asp.net gridview fancybox

我有一个Gridview,它有Hyperlinkfield。当点击该字段时,我想要一个精美的盒子打开,在那个花哨的盒子里,我想要一个iframe来显示必须打开的超链接域页面。

我的Gridview是:

<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>

目前,只有两列,两者实际上是相同的。 超链接文件带我到下一页。我试图使用模板字段向gridview添加精美的盒子逻辑。

javascript代码是:

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

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

我仍然没有弹出。我是fancybox的新手。请帮忙!

谢谢你!

编辑: 我的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" />

1 个答案:

答案 0 :(得分:0)

尝试定位像

这样的实际链接的
$(".forPopup").fancybox({
   'titlePosition': 'inside',
   'transitionIn': 'elastic',
   'transitionOut': 'none',
   'type': 'iframe' //<-- if opening external pages
});

...你实际上并不需要click()方法(一旦选择器被绑定就会触发fancybox)