In this article, I will explain how to use ASP.Net AJAX Control Toolkit ConfirmButtonExtender with ModalPopupExtender Modal Popup in order to style the ConfirmButtonExtender dialog and also to make it look same in all browsers.
By default the Confirmation Box displayed in Internet Explorer as follows
ASP.Net AJAX ConfirmButtonExtender with ModalPopupExtender Example

In the following example I will make use of a dummy GridView with some records which can be deleted with Confirmation Box using ConfirmButtonExtender with ModalPopupExtender Modal Popup.
 
HTML Markup
First we need to register the AJAX Control Toolkit on the page
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
Below is an ASP.Net GridView with two BoundField columns and one TemplateField column which consists of a Delete LinkButton with associated ConfirmButtonExtender and ModalPopupExtender for displaying the confirmation box.
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000"
    runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID = "lnkDelete" CommandArgument = '<%# Eval("Id") %>' OnClick = "DeleteRecord" runat = "server" Text = "Delete"></asp:LinkButton>
                <cc1:ConfirmButtonExtender ID="cbe" runat="server" DisplayModalPopupID="mpe" TargetControlID="lnkDelete">
                </cc1:ConfirmButtonExtender>
                <cc1:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup" TargetControlID="lnkDelete" OkControlID = "btnYes"
                    CancelControlID="btnNo" BackgroundCssClass="modalBackground">
                </cc1:ModalPopupExtender>
                <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
                    <div class="header">
                        Confirmation
                    </div>
                    <div class="body">
                        Do you want to delete this record?
                    </div>
                    <div class="footer" align="right">
                        <asp:Button ID="btnYes" runat="server" Text="Yes" />
                        <asp:Button ID="btnNo" runat="server" Text="No" />
                    </div>
                </asp:Panel>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
 
In order to associate a ConfirmButtonExtender with ModalPopupExtender we need to set the following properties
1. TargetControlID – The TargetControlID of both the ConfirmButtonExtender with ModalPopupExtender must be equal.
2. DisplayModalPopupID – The DisplayModalPopupID property of the ConfirmButtonExtender must be set with the ID ModalPopupExtender Modal Popup that we need to display as Confirmation Box.
3. OkControlID and CancelControlID – Since we want the ModalPopupExtender Modal Popup to work as Confirmation Box, it is necessary that we have two buttons one for OK and one for Cancel.
The above three points are necessary so that when the Target Control of the ConfirmButtonExtender is triggered the ModalPopupExtender Modal Popup is displayed.
Note: For more details on using the ASP.Net AJAX ModalPopupExtender please refer my article Building Modal Popup using ASP.Net AJAX ModalPopupExtender Control
 
ASP.Net AJAX ConfirmButtonExtender with ModalPopupExtender Example
 
Binding the GridView with dummy records
Below is the code to populate the GridView with dummy records. Here I am also storing the DataTable into a ViewState variable so that it can be used for deleting rows.
Namespaces
using System.Data;
 
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        ViewState["Persons"] = dt;
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
 
Deleting the GridView Records
Below is the event handler that is executed after the Delete Confirmation Modal Popup is shown and the OK Button is pressed.
Note: For demo purposes I am deleting rows from the DataTable that was stored in ViewState variable using the ID extracted from the CommandArgument of the LinkButton, you can replace the code with actual deletion from the database. For more details you can refer my article Simple Insert Select Edit Update and Delete in ASP.Net GridView control
protected void DeleteRecord(object sender, EventArgs e)
{
    int id = int.Parse((sender as LinkButton).CommandArgument);
    DataTable dt = (DataTable)ViewState["Persons"];
    dt.Rows.Remove(dt.Select("Id = " + id)[0]);
    ViewState["Persons"] = dt;
    GridView1.DataSource = dt;
    GridView1.DataBind();
}
 
ASP.Net AJAX ConfirmButtonExtender with ModalPopupExtender Example
 
 
CSS Classes for styling the Modal Popup
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    .modalBackground
    {
        background-color: Black;
        filter: alpha(opacity=40);
        opacity: 0.4;
    }
    .modalPopup
    {
        background-color: #FFFFFF;
        width: 300px;
        border: 3px solid #0DA9D0;
    }
    .modalPopup .header
    {
        background-color: #2FBDF1;
        height: 30px;
        color: White;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
    }
    .modalPopup .body
    {
        min-height: 50px;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
    }
    .modalPopup .footer
    {
        padding: 3px;
    }
    .modalPopup .yes, .modalPopup .no
    {
        height: 23px;
        color: White;
        line-height: 23px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
    }
    .modalPopup .yes
    {
        background-color: #2FBDF1;
        border: 1px solid #0DA9D0;
    }
    .modalPopup .no
    {
        background-color: #9F9F9F;
        border: 1px solid #5C5C5C;
    }
</style>
 
 
Demo
View Demo
 
Downloads