How to display jquery animated confirmation message in

While working in one of my personal project, I used “displaying confirmation message using jquery”. It is very nice and easy to use.
Step1: Download the related jquery plugin and Write the HTML code like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableViewState="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&gt;
<html xmlns=""&gt;
<head runat="server">
<title>Add New Customer</title>
<link href="Default.css" rel="stylesheet" type="text/css" />
<form id="form1" runat="server" defaultbutton="Save" defaultfocus="Name">
<asp:ScriptManager runat="server">
<asp:ScriptReference Path="~/jquery-1.2.6.min.js" />
<asp:ScriptReference Path="~/jquery.blockUI.js" />
<asp:ScriptReference Path="~/Default.js" />

<div id="EntryForm">
<label for="Name">Name:</label>
<asp:TextBox runat="server" ID="Name" />

<label for="Address">Address:</label>
<asp:TextBox runat="server" ID="Address" />

<label for="City">City:</label>
<asp:TextBox runat="server" ID="City" />

<label for="State">State:</label>
<asp:TextBox runat="server" ID="State" />

<label for="Zip">Zip:</label>
<asp:TextBox runat="server" ID="Zip" />

<asp:Button runat="server" ID="Save" OnClick="Save_Click"
Text="Add Customer" UseSubmitBehavior="false" />

<asp:UpdatePanel runat="server" ID="upConfirmation">
<asp:AsyncPostBackTrigger ControlID="Save" />
<asp:Panel runat="server" ID="ConfirmSave" Visible="false">
<h3><asp:Literal runat="server" ID="CustomerName" /> added</h3>

<a href="#" id="CloseConfirm">Close</a>

Step2:Write the code in code behind like this

using System;
using System.Web.UI;

public partial class _Default : System.Web.UI.Page
protected void Save_Click(object sender, EventArgs e)
// Save the customer to your data store here.

// Display the confirmation.
ConfirmSave.Visible = true;

// You can custamize the confirmation.
CustomerName.Text = Name.Text;


One thought on “How to display jquery animated confirmation message in

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.