Show GridView in jQuery DialogBox with Fixed header on scroll using jQuery in ASP.Net

Refer the below code.

HTML

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" />
<div id="dialog" style="display: none">
    <asp:UpdatePanel ID="up" runat="server">
        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Width="100%">
                <Columns>
                    <asp:BoundField DataField="CustomerId" HeaderText="Id" />
                    <asp:BoundField DataField="Name" HeaderText="Name" />
                    <asp:BoundField DataField="Country" HeaderText="Country" />
                </Columns>
            </asp:GridView>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" />
<script src="Script/ScrollableGridViewPlugin_ASP.NetAJAXmin.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnShowPopup]").click(function () {
            ShowPopup();
            return false;
        });
        $('#<%=GridView1.ClientID %>').Scrollable({
            ScrollHeight: 300,
            IsInUpdatePanel: true
        });
        $('[id*=GridView1]').closest('div').attr('style', 'width: 100%; height: 300px; overflow: auto;');
        $('[id*=GridView1]').closest('div').prev().find('table').attr('style', 'width: 95%; border-collapse: collapse;');
    });
    function ShowPopup() {
        $("#dialog").dialog({
            position: { at: "right top", of: window },
            title: "GridView",
            width: 450,
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
    }
</script>
<style type="text/css">
    body
    {
        font-family: Arial;
    }
    table
    {
        border: 1px solid #ccc;
        border-collapse: collapse;
        background-color: #fff;
        font-size: 10pt !important;
        font-family: Arial !important;
    }
    table th
    {
        background-color: #B8DBFD;
        color: #333;
        font-weight: bold;
    }
    table th, table td
    {
        padding: 5px;
        border: 1px solid #ccc;
    }
    table, table table td
    {
        border: 0px solid #ccc;
    }
</style>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}

private void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, Name, Country FROM Customers"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }
        }
    }
}

Screenshot