Replacing Javascript confirm dialog with a JQuery UI Dialog in a GridView control

Replacing Javascript confirm dialog with a JQuery UI Dialog in a GridView control

Hello, I'm very new to JQuery.  So far, I have alwaya used the Javascript confirm dialog box to display the confirmation dialog to the user.  I would like to replace this with the JQuery UI Dialog box.
 
My code is as below:
The gridview is populated with the current roles and there are two buttons: Edit and Delete.  The delete button is a link button. 
 
HTML code

<

 asp:GridView ID="RolesGridView" runat="server" CssClass="grid_list" CellPadding="0" CellSpacing="0" AutoGenerateColumns="false" OnRowCommand="RolesGridView_RowCommand" OnRowCreated="RolesGridView_RowCreated" OnRowDeleted="RolesGridView_RowDeleted" OnRowDeleting="RolesGridView_RowDeleting">

<Columns>

<asp:TemplateField HeaderText="Role">

<ItemTemplate>

<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Description">

<ItemTemplate>

<asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Active?">

<ItemTemplate>

<asp:Label ID="StatusLabel" runat="server" Text='<%# Eval("Status") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField AccessibleHeaderText="RoleID" Visible="false">

<ItemTemplate>

<asp:Label ID="RoleIDLabel" runat="server" Text='<%# Eval("Id") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Action">

<ItemTemplate>

<asp:HyperLink runat="server" ID="EditHyperLink" NavigateUrl='<%# String.Format("AdminRoleManagement.aspx?RoleID={0}", Eval("Id")) %>' Text="Edit"></asp:HyperLink>

<asp:LinkButton runat="server" ID="DeleteLinkButton" CommandName="Delete" Text="Delete"></asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

 
Code Behind

#region

 RolesGridView_RowCommand

public void RolesGridView_RowCommand(object sender, System.Web.UI.WebControls.GridViewCommandEventArgs e)

{

int intIndex;

GridViewRow rolesGridViewRow;

Label roleIDLabel;

switch (e.CommandName)

{

case "Delete":

intIndex =

Convert.ToInt32(e.CommandArgument);

rolesGridViewRow = RolesGridView.Rows[intIndex];

roleIDLabel = (

Label)rolesGridViewRow.Cells[3].FindControl("RoleIDLabel");

LinkButton lnkDelete = (LinkButton)rolesGridViewRow.Cells[4].FindControl("DeleteLinkButton");

this.DeleteRole(Convert.ToInt32(roleIDLabel.Text));

break;

}

}

#endregion

 RolesGridView_RowCommand //RolesGridView_RowCommand

#region

 RolesGridView_RowCreated

public void RolesGridView_RowCreated(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

HyperLink editHyperLink = (HyperLink)e.Row.Cells[4].FindControl("EditHyperLink");

LinkButton deleteLinkButton = (LinkButton)e.Row.Cells[4].FindControl("DeleteLinkButton");

deleteLinkButton.CommandArgument = e.Row.RowIndex.ToString();

deleteLinkButton.Attributes.Add(

"onclick", "if(confirm('Are you sure you want to delete this role?')){ alert('clicked yes');} else{alert ('clicked no'); return false;}");

}

}

#endregion

 //RolesGridView_RowCreated
 
Note that I am adding the onclick attribute to the delete link button when each row is created.  When the user clicks a delete button in a gridview row, it should display the JQuery UI Dialog asking for confirmation and then call the DeleteRole() function in the .CS file that will delete the role.
 
Thanks in advance,