Introduction

Today I am going to create a custom message box that comes up in AJAX way. A single message box to show Information messages, Warnings, Errors and Success messages.

Problem is that we use alert box to show messages and it has different view in browsers. We can't render any html in alert box. So we need something compatible with our website look and feel. We are going to use ModalPopup of Ajaxtoolkit to achieve this. Read more about ModalPopup. There are number of jQuery Message box available but people are scare of jQuery/JavaScript stuff. In Webforms we most of the time use AjaxToolkit controls. They are easy to use and handle. So first a little about the AJAX Control Toolkit.

What is the ASP.NET AJAX Control Toolkit?

The ASP.NET AJAX Control Toolkit is an open-source project built on top of the Microsoft ASP.NET AJAX framework. It is a joint effort between Microsoft and the ASP.NET AJAX community that provides a powerful infrastructure to write reusable, customizable and extensible ASP.NET AJAX extenders and controls, as well as a rich array of controls that can be used out of the box to create an interactive Web experience. See more

Let's Start

First create a Web Form Website/Application
Get Ajax Control Toolkit respective framework DLL [AjaxControlToolkit.dll] from CodePlex ..
Add this DLL to the Bin folder
Add Reference in project and select AjaxControlToolkit.dll from Bin folder

Register Ajaxtoolkit on pages.. There are two ways either add in web.config like

<configuration>
  <system.web>
    <pages>
      <controls>
        <add tagPrefix="ajaxToolkit" 
          assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
      </controls>
    </pages>
  </system.web>
</configuration>

or you can add on each page where you want to use AjaxToolkit:

<%@ Register TagPrefix="ajaxToolkit" 
  Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>

Add page to the website named MessagePopup.aspx and select "Place code in separate file" option. This add two files MessagePopup.aspx which contains html and asp controls and MessagePopup.aspx.cs where all the server side code resides.
Add UpdatePanel and inside it add ModalPopup and Message Panel to Page.. See Below My ASPX page

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeFile="MessagePopup.aspx.cs" Inherits="MessagePopup" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .MessageBoxPopupBackground
        {
            filter: Alpha(Opacity=40);
            -moz-opacity: 0.4;
            opacity: 0.4;
            width: 100%;
            height: 100%;
            background-color: #999999;
            position: absolute;
            z-index: 500001;
            top: 0px;
            left: 0px;
        }
        .popupHeader
        {
            float: left;
            padding: 5px 0px 0px 0px;
            width: 420px;
            font-family: tahoma;
            font-weight: bold;
            height: 25px;
            text-decoration: none;
            background-image: url("images/body_tab_top.jpg");
            background-repeat: repeat-x;
            color: #FFFFFF;
        }
        .popupHeader span
        {
            color: #fff;
            text-decoration: none;
            line-height: 15px;
            text-decoration: none;
            float: left;
            margin-left: 10px;
        }
        .popupHeader a
        {
            color: #fff !important;
            text-decoration: none !important;
            line-height: 15px;
            text-decoration: none;
            float: right;
            margin-right: 10px;
        }
        .popup_button
        {
            color: #fff !important;
            font-family: arial, Geneva, sans-serif;
            font-size: 12px;
            font-weight: normal;
            text-decoration: none !important;
            width: auto;
            background-image: url('images/button_bg.jpg');
            background-repeat: repeat-x; /*height: 24px;*/
            line-height: 22px;
            padding: 3px 15px 3px 15px;
            float: left;
            margin: 0px 0px 0px 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="sm1" />
    <asp:UpdatePanel runat="server" ID="upMain">
        <ContentTemplate>
            <asp:Button runat="server" ID="btnShow" 
              OnClick="btnShowSuccess_Click" Text="Success" />
            <asp:Button runat="server" ID="Button1" 
              OnClick="btnShowError_Click" Text="Error" />
            <asp:Button runat="server" ID="Button2" 
              OnClick="btnShowWarning_Click" Text="Warning" />
            <asp:Button runat="server" ID="Button3" 
              OnClick="btnShowMessage_Click" Text="Message" />
            <%--Message popup area start--%>
            <asp:Button runat="server" ID="btnMessagePopupTargetButton" Style="display: none;" />
            <ajaxToolkit:ModalPopupExtender ID="mpeMessagePopup" runat="server" PopupControlID="pnlMessageBox"
                TargetControlID="btnMessagePopupTargetButton" OkControlID="btnOk" CancelControlID="btnCancel"
                BackgroundCssClass="MessageBoxPopupBackground">
            </ajaxToolkit:ModalPopupExtender>
            <asp:Panel runat="server" ID="pnlMessageBox" 
                   BackColor="White" Width="420" 
                   Style="display: none; border: 2px solid #780606;">
                <div class="popupHeader" style="width: 420px;">
                    <asp:Label ID="lblMessagePopupHeading" Text="Information" 
                        runat="server"></asp:Label><asp:LinkButton
                        ID="btnCancel" runat="server" 
                         Style="float: right; margin-right: 5px;">X</asp:LinkButton>
                </div>
                <div style="max-height: 500px; width: 420px; overflow: hidden;">
                    <div style="float:left; width:380px; margin:20px;">
                        <table style="padding: 0; border-spacing: 0; border-collapse: collapse; width: 100%;">
                            <tr>
                                <td style="text-align: left; vertical-align: top; width: 11%;">
                                    <asp:Literal runat="server" ID="ltrMessagePopupImage"></asp:Literal>
                                </td>
                                <td style="width: 2%;">
                                </td>
                                <td style="text-align: left; vertical-align: top; width: 87%;">
                                    <p style="margin: 0px; padding: 0px; color: #5F0202;">
                                        
                                            <asp:Label runat="server" ID="lblMessagePopupText"></asp:Label>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right; vertical-align: top;" colspan="3">
                                    <div style="margin-right: 0px; float: right; width: auto;">
                                        <asp:LinkButton ID="btnOk" runat="server" 
                                            CssClass="popup_button">Ok</asp:LinkButton>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </asp:Panel>
            <%--Message popup area end--%>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

I used following ModalPopup properties

TargetControlID - The ID of the element that activates the modal popup. In our case it is "btnMessagePopupTargetButton" and it hidden on page. We will call popup from code behind by its show() method.
PopupControlID - The ID of the element to display as a modal popup. It's our custom designed panel "pnlMessageBox".
BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed. Our CSS class is "MessageBoxPopupBackground" which shows popup in center of page.
OkControlID - The ID of the element that dismisses the modal popup. "btnOk" added to the message panel
CancelControlID - The ID of the element that cancels the modal popup "btnCancel" added to the message panel

Note:

Literal control "ltrMessagePopupImage" for image

Write button click events to show messages on page.. See code behind file of page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class MessagePopup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnShowMessage_Click(object sender, EventArgs e)
    {
        ShowPopupMessage("We have created a message box popup for our site.", 
          PopupMessageType.Message);
    }

    protected void btnShowSuccess_Click(object sender, EventArgs e)
    {
        ShowPopupMessage("Custom success box created successfully for our site!", 
          PopupMessageType.Success);
    }

    protected void btnShowWarning_Click(object sender, EventArgs e)
    {
        ShowPopupMessage("This is a warning message box!", 
          PopupMessageType.Warning);
    }

    protected void btnShowError_Click(object sender, EventArgs e)
    {
        try
        {
            throw new Exception("Some error in code! Kindly contact your " + 
              "administrator for more details.<br/> Thanks");
        }
        catch (Exception ex)
        {
            ShowPopupMessage(ex.Message, PopupMessageType.Error);
        }
    }

    /// <summary>
    /// Details: Change modal popup image according to PopupMessageType
    /// </summary>
    /// <param name="message"></param>
    /// <param name="messageType"></param>
    private void ShowPopupMessage(string message, PopupMessageType messageType)
    {
        switch (messageType)
        {
            case PopupMessageType.Error:
                lblMessagePopupHeading.Text = "Error";
                //Render image in literal control
                ltrMessagePopupImage.Text = "<img src='" + 
                  Page.ResolveUrl("~/images/imgError.png") + "' alt='' />";
                break;
            case PopupMessageType.Message:
                lblMessagePopupHeading.Text = "Information";
                ltrMessagePopupImage.Text = "<img src='" + 
                  Page.ResolveUrl("~/images/imgInformation.png") + "' alt='' />";
                break;
            case PopupMessageType.Warning:
                lblMessagePopupHeading.Text = "Warning";
                ltrMessagePopupImage.Text = "<img src='" + 
                  Page.ResolveUrl("~/images/imgWarning.png") + "' alt='' />";
                break;
            case PopupMessageType.Success:
                lblMessagePopupHeading.Text = "Success";
                ltrMessagePopupImage.Text = "<img src='" + 
                  Page.ResolveUrl("~/images/imgSuccess.png") + "' alt='' />";
                break;
            default:
                lblMessagePopupHeading.Text = "Information";
                ltrMessagePopupImage.Text = "<img src='" + 
                  Page.ResolveUrl("~/images/imgInformation.png") + "' alt='' />";
                break;
        }

        lblMessagePopupText.Text = message;
        mpeMessagePopup.Show();
    }

    /// <summary>
    /// Message type enum
    /// </summary>
    public enum PopupMessageType
    {
        Error,
        Message,
        Warning,
        Success
    }
}

I have created enum for Message popup types. So just need to pass type, the code will show respective heading and image for that type.

See output below:

Message Popup for Errors, Warnings, Success and Information Message With ModalPopup