Easiest way to show a jquery popup details page from ASP.NET Gridview

Question

I have ac# Asp.net Gridview with some data and then there is a details page for each row of data with a hyperlink to view the details page. What is the best (easiest) way to show a popup using jquery modal box after clicking on the "Show Details" for any particular row of data?

So for example the page "details.aspx?id=10012" would popup in a modal dialog after clicking a "Show Details" hyperlink

Answer 1

An example where I am passing CustomerID as QueryString to another page

Step 1 - Create an ItemTemplate in your page like this.

<ItemTemplate>
    <asp:HyperLink ID="DetailsLink" runat="server"
        CssClass="my_link"
        Text="View Details"
        ToolTip='<%# Eval("CustomerID") %>'
        NavigateUrl="#">
    </asp:HyperLink>
</ItemTemplate>

Step 2 - Place a div outside the GridView like this.

<div id="dialog">
    <iframe id="myIframe" src=""></iframe>
</div>

Step 3 - JS

$(document).ready(function () {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        height: 600,
        open: function (ev, ui) {
            $('#myIframe').attr('src', 'Popup.aspx?id=' + selectedID);
        }
    });
    var selectedID = "0";
    $('.my_link').click(function (event) {
        selectedID = this.title;
        event.preventDefault();
        $('#dialog').dialog('open');
    });
});

The code is self explanatory. Hope this helps.